Как удалить ненужные пробелы в верхней части моей веб-страницы? - PullRequest
Новая
       0

Как удалить ненужные пробелы в верхней части моей веб-страницы?

0 голосов
/ 03 апреля 2020

У меня есть два деления, как вы можете видеть ниже. Я хочу создать 5 пикселей margin-top между двумя. Однако margin-top внутреннего div вызывает ненужное поле в верхней части внешнего div и, следовательно, вызывает ненужное поле в верхней части страницы. Добавление свойства border к внешнему div решает проблему, и я также могу исправить это с помощью других хаков, таких как размещение и заполнение внешнего div. Однако мне любопытно узнать, что вызывает эту проблему? 

 <div class="outer">
  <div class="inner">

  </div> 
 </div>

а вот Css

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

.outer{
  width:100%;
  height:200px;
  background:black;
}

.inner{
  width:100%;
  height:100px;
  margin-top:5px;
  background:red;
}


* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.outer {
  width: 100%;
  height: 200px;
  background: black;
}

.inner {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  background: red;
}
<div class="outer">
  <div class="inner">
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Проблема в том, что внутренний div находится в самом начале внешнего. Один трюк будет добавлять padding-top к внешнему div: 

.outer{
  /* other stuff */
  padding-top: 1px;
}

.inner{
  /* other stuff */
  margin-top: 4px;
}

или помещать все 5px в padding-top

.outer{
  /* other stuff */
  padding-top: 5px;
}

Или вы можете использовать другой элемент перед внутренним div, например hr

<div class="outer">
  <hr>
  <div class="inner">

  </div> 
</div>

Но лучший трюк (как сказал Мухаммед) сделать внешний div inline-block. 

.outer{
  /* other stuff */
  display: inline-block;
}
0 голосов
/ 03 апреля 2020

Все, что вам нужно, это сделать отображение внешнего div-блока inline-block. 

display: inline-block;

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

 html {
      margin: 0;
    }

    * {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
    }

    .outer {
      width: 100%;
      height: 200px;
      background: black;
      display: inline-block;
    }

    .inner {
      width: 100%;
      height: 100px;
      margin-top: 10px;
      background: red;
    }
<html>

<head>
  <title>StackOverFlow &#127831;</title>
</head>

<body>
  <div class="outer">
    <div class="inner">
    </div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...