ruang putih di antara elemen div

Saya telah melihat banyak pertanyaan serupa untuk masalah ini dan sepertinya saya masih belum dapat menemukan solusinya (masih baru mempelajari semua hal ini).

Saya mencoba membuat situs web portofolio dan saya telah menempatkan setiap proyek di dalam elemen div (tidak yakin apa yang saya lakukan dengan div...). Saya mengalami masalah dalam menghilangkan banyak ruang putih di antara div/proyek yang ditampilkan secara vertikal, jadi Anda harus menggulir ke bawah untuk melihat yang berikutnya. Saya sudah mencoba menyesuaikan margin ke 0 pada p, h3, dan div tetapi tidak berhasil. Ada ide?

body,
html {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

h3 {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
}

li {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  list-style: none;
  line-height: normal;
}

div.movie {
  transform: scale(0.5);
  font-size: 20px;
  font-family: Helvetica;
  overflow: auto;
  width: 1200px;
  padding: 25px;
  float: left;
  clear: none;
  border-bottom: 1px solid black;
  display: block;
}

div.reader {
  transform: scale(0.5);
  font-size: 20px;
  font-family: Helvetica;
  overflow: auto;
  padding: 30px;
  float: left;
  clear: none;
  border-bottom: 1px solid black;
  display: block;
}

.main .projects {
  padding: 0;
  margin: 0;
}

div.sidebar {
  position: fixed;
  padding-top: 35px;
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  margin-left: 10px;
  padding: 0;
  line-height: 40%;
  padding-top: 2%;
}

p {
  font-family: Helvetica, sans-serif;
  font-size: 30px;
  margin-left: 10px;
  padding: 0;
}
<div class="main">
  <div class="sidebar">
    <h3> olivia schneider, </h3>
    <h3> graphic designer & writer </h3>
    <br>
    <h3> +1 (585) 766 5189 </h3>
    <h3> [email protected] </h3>
    <h3> instagram </h3>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <!-- <h3> recent projects </h3>
                    <ul>
                        <li> Hunger Mountain #25</li>
                    </ul> -->
  </div>
  <div class="projects">
    <div class="movie"> <video width="1200" height="800" src="/Users/oliviaschneider/Documents/code projects/PERSONAL WEBSITE_small victories/resources/American Healthcare_OSchneider_PinUp2020 copy.mp4" controls autoplay muted> </video>
      <p>2020 — typography, creative direction, video editing</p>
      <p>American Healthcare</p>
      <p>A short movie I made after I turned 26, got kicked off my parent's healthcare plan, and waited 5 hours to sign up for my state's healthcare coverage.</p>
    </div>

    <div class="reader"> <video width="1200" height="800" src="/Users/oliviaschneider/Documents/code projects/PERSONAL WEBSITE_small victories/reader copy.mp4" controls autoplay muted> </video>
      <p>2020 — web design, front-end development, writing </p>
      <p>A Web Reader</p>
      <p>A place for my essays, reflections, and critiques of things. </p>
    </div>
  </div>
</div>


html css whitespace margins
person Olivia    schedule 08.02.2021    source sumber
comment
Bagaimana Anda membuat halaman html Anda? Apakah dari template atau framework?   -  person Mark Moretto    schedule 09.02.2021

Jawaban (1)


arrow_upward
0
arrow_downward

Terlepas dari pengaturan transform: scale(0.5);, div tersebut masih menempati ruang aslinya, yaitu posisi dan ukuran aslinya tanpa transformasi tersebut.

Jadi sebaiknya Anda menghapus pengaturan itu dan menyesuaikan ukuran video yang disertakan, baik secara absolut (seperti yang saya lakukan di bawah, menggunakan atribut sebaris) atau dengan menggunakan elemen width: 100% and height: autoon thevideo`.

(catatan: Saya menghapus sidebar dari kode dalam cuplikan di bawah ini untuk berkonsentrasi pada masalah sebenarnya yang Anda jelaskan)

body,
html {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

h3 {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
}

li {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  list-style: none;
  line-height: normal;
}

div.movie {
  font-size: 20px;
  font-family: Helvetica;
  overflow: auto;
  width: 1200px;
  padding: 25px;
  float: left;
  clear: none;
  border-bottom: 1px solid black;
  display: block;
}

div.reader {
  font-size: 20px;
  font-family: Helvetica;
  overflow: auto;
  padding: 30px;
  float: left;
  clear: none;
  border-bottom: 1px solid black;
  display: block;
}

.main .projects {
  padding: 0;
  margin: 0;
}

div.sidebar {
  position: fixed;
  padding-top: 35px;
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  margin-left: 10px;
  padding: 0;
  line-height: 40%;
  padding-top: 2%;
}

p {
  font-family: Helvetica, sans-serif;
  font-size: 30px;
  margin-left: 10px;
  padding: 0;
}
<div class="main">

  <div class="projects">
    <div class="movie"> <video width="600" height="400" src="/Users/oliviaschneider/Documents/code projects/PERSONAL WEBSITE_small victories/resources/American Healthcare_OSchneider_PinUp2020 copy.mp4" controls autoplay muted> </video>
      <p>2020 — typography, creative direction, video editing</p>
      <p>American Healthcare</p>
      <p>A short movie I made after I turned 26, got kicked off my parent's healthcare plan, and waited 5 hours to sign up for my state's healthcare coverage.</p>
    </div>

    <div class="reader"> <video width="600" height="400" src="/Users/oliviaschneider/Documents/code projects/PERSONAL WEBSITE_small victories/reader copy.mp4" controls autoplay muted> </video>
      <p>2020 — web design, front-end development, writing </p>
      <p>A Web Reader</p>
      <p>A place for my essays, reflections, and critiques of things. </p>
    </div>
  </div>
</div>

person Johannes    schedule 09.02.2021
comment
Terima kasih!!!!!! Saya akan melanjutkan dengan melihat contoh Anda di sini. - person Olivia; 09.02.2021