div元素之间的空白

Question

对于这个问题，我已经看了一堆类似的问题，但我似乎仍然找不到解决方案(还在学习所有这些东西)。

我想做一个投资组合网站，我已经把每个项目内的div元素(不知道我在做什么与div…)。我有麻烦消除在垂直显示的div/项目之间的大量空白，所以你必须向下滚动才能看到下一个。我试过将p, h3和div的边距调整为0，但没有运气。什么好主意吗?

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> [phone] </h3>
<h3> [e-mail] </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>

Answer 1

尽管设置了transform: scale(0.5);，但这些div仍然占据了它们原来的空间，即它们原来的位置和大小，而没有进行转换。

因此，您可能最好删除该设置并调整所包含视频的大小，无论是绝对度量(如我下面所做的那样，使用内联属性)还是使用width: 100% andheight: autoon thevideo ' elements。

(注意:我删除了下面代码片段中的侧边栏，以便专注于您描述的实际问题)

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>