пробел между элементами div

Я просмотрел кучу подобных вопросов для этой проблемы, и я до сих пор не могу найти решение (все еще просто изучаю все эти вещи).

Я пытаюсь создать веб-сайт портфолио, и я поместил каждый проект в элемент 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>


html css whitespace margins
person Olivia    schedule 08.02.2021    source источник
comment
Как вы сделали свою html-страницу? Это из шаблона или фреймворка?   -  person Mark Moretto    schedule 09.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

Несмотря на настройку transform: scale(0.5);, эти элементы div по-прежнему занимают исходное место, т. е. исходное положение и размер без этого преобразования.

Так что вам, вероятно, лучше удалить этот параметр и отрегулировать размер включенного видео либо в абсолютных единицах (как я сделал ниже, используя встроенные атрибуты), либо с помощью элементов width: 100% and height: autoon thevideo`.

(примечание: я удалил боковую панель из кода в приведенном ниже фрагменте, чтобы сосредоточиться на реальной проблеме, которую вы описали)

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>

person Johannes    schedule 09.02.2021
comment
Спасибо!!!!!! Я продолжу, глядя на ваш пример здесь. - person Olivia; 09.02.2021