ฉันได้ดูคำถามที่คล้ายกันมากมายสำหรับปัญหานี้แล้ว แต่ดูเหมือนว่าฉันยังคงไม่สามารถหาวิธีแก้ปัญหาได้ (ยังเพิ่งเรียนรู้สิ่งทั้งหมดนี้)
ฉันกำลังพยายามสร้างเว็บไซต์พอร์ตโฟลิโอและได้วางแต่ละโครงการไว้ในองค์ประกอบ 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>