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> +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>

Answer 1

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

因此，您最好删除该设置并调整所包含视频的大小，无论是绝对测量（就像我在下面所做的那样，使用内联属性）或使用 width: 100% and height: autoon the视频` 元素。

（注意：我从下面代码段中的代码中删除了侧边栏，以专注于您描述的实际问题）

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>

div 元素之间的空白

1 个答案: