html - div元素之间的空白
问题描述
我已经针对这个问题查看了一堆类似的问题,但我似乎仍然无法找出解决方案(仍然只是学习所有这些东西)。
我正在尝试制作一个投资组合网站,并将每个项目放在一个 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> +1 (585) 766 5189 </h3>
<h3> olivia.schneider@vcfa.edu </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>
解决方案
尽管进行了transform: scale(0.5);
设置,但这些 div 仍然占据它们的原始空间,即它们的原始位置和大小,没有 进行转换。
因此,您可能最好删除该设置并调整包含视频的大小,无论是绝对度量(如下所示,使用内联属性)或使用width: 100% and
height: auto on the
video` 元素。
(注意:我从下面的代码片段中删除了侧边栏,以专注于您描述的实际问题)
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>
推荐阅读
- javascript - 有没有办法在 package.json 中对依赖项进行分组?
- javascript - 当我激活作为对话框的删除按钮时,页面中出现水平滚动
- java - 检测长度为零
- c# - .NET Core Identity 和 IdentityServer4 在一个项目中
- php - 如何获取文件对象 laravel
- ios - 如何为 PencilKit 创建 .drawing 文件?
- java - tomcat如何调用@requestMapping注解
- r - 如何将多行列转换为长格式 R data.table
- amazon-web-services - AWS S3 对象删除问题
- mongodb - 如何使用 mongo-go-driver 编组/解组具有多态结构的 bson 数组