ช่องว่างระหว่างองค์ประกอบ div

ฉันได้ดูคำถามที่คล้ายกันมากมายสำหรับปัญหานี้แล้ว แต่ดูเหมือนว่าฉันยังคงไม่สามารถหาวิธีแก้ปัญหาได้ (ยังเพิ่งเรียนรู้สิ่งทั้งหมดนี้)

ฉันกำลังพยายามสร้างเว็บไซต์พอร์ตโฟลิโอและได้วางแต่ละโครงการไว้ในองค์ประกอบ div (ไม่แน่ใจว่าฉันกำลังทำอะไรกับ div...) ฉันมีปัญหาในการลบพื้นที่สีขาวจำนวนมากระหว่าง div/โปรเจ็กต์ซึ่งแสดงในแนวตั้ง ดังนั้นคุณต้องเลื่อนลงเพื่อดูอันถัดไป ฉันได้ลองปรับระยะขอบเป็น 0 บน p, h3 และ div โดยไม่มีโชค มีความคิดอะไรบ้าง?

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>


person Olivia    schedule 08.02.2021    source แหล่งที่มา
comment
คุณสร้างหน้า html ของคุณได้อย่างไร? มันมาจากเทมเพลตหรือกรอบงานหรือไม่?   -  person Mark Moretto    schedule 09.02.2021


คำตอบ (1)


แม้จะมีการตั้งค่า transform: scale(0.5); แต่ div เหล่านั้นยังคงครอบครองพื้นที่เดิม กล่าวคือ ตำแหน่งและขนาดดั้งเดิม โดยไม่มี การแปลงนั้น

ดังนั้น คุณควรลบการตั้งค่านั้นและปรับขนาดของวิดีโอที่รวมไว้จะดีกว่า ไม่ว่าจะในรูปแบบที่สมบูรณ์ (อย่างที่ฉันทำด้านล่าง โดยใช้แอตทริบิวต์แบบอินไลน์) หรือโดยใช้องค์ประกอบ width: 100% and height: autoon thevideo`

(หมายเหตุ: ฉันลบแถบด้านข้างออกจากโค้ดในตัวอย่างด้านล่างเพื่อมุ่งเน้นไปที่ปัญหาจริงที่คุณอธิบายไว้)

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
ขอบคุณ!!!!!! ฉันจะดูตัวอย่างของคุณต่อไปที่นี่ - person Olivia; 09.02.2021