div元素之间的空白
[英]white space in between div elements
问题描述
I've looked at a bunch of similar questions for this problem and I still can't seem to figure out the solution (still just learning all of this stufF).
我已经针对这个问题查看了一堆类似的问题，但我似乎仍然无法找出解决方案（仍然只是学习所有这些东西）。
I'm trying to make a portfolio website and I've placed each project inside a div element (not sure what I'm doing with the divs...).我正在尝试制作一个投资组合网站，并将每个项目放在一个 div 元素中（不确定我在用 div 做什么......）。 I'm having trouble removing the large amount of white space in between the divs/projects which are shown vertically, so you have to scroll down to see the next one.我无法删除垂直显示的 div/项目之间的大量空白，因此您必须向下滚动才能看到下一个。 I've tried adjusting the margins to 0 on p, h3, and the divs with no luck.我尝试将 p、h3 和 div 的边距调整为 0，但没有成功。 Any ideas?有任何想法吗？
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>
1 个解决方案
解决方案1
0 已采纳 2021-02-09 00:15:33
Despite of the transform: scale(0.5);尽管进行了transform: scale(0.5); setting, those divs still occupy their original space, ie their original position and size without that transform.设置，那些 div 仍然占据它们原来的空间，即它们原来的 position 和没有那个变换的大小。
So you probably better erase that setting and adjust the size of the included video, either in absolute measures (as I did below, using the inline attributes) or by using width: 100% and height: auto on the video` elements.因此，您可能最好删除该设置并调整包含视频的大小，无论是绝对度量（如下所示，使用内联属性）或通过on the video` 元素上使用width: 100% and height: auto 。
(note: I erased the sidebar from the code in the snippet below to concentrate on the actual problem you described) （注意：我从下面的代码片段中删除了侧边栏，以专注于您描述的实际问题）
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.