Падение не имеет смысла - PullRequest
Новая
       15

Падение не имеет смысла

0 голосов
/ 19 сентября 2018

Я немного смущен тем, как работает заполнение.Код ниже - это то, что я получил из Free Code Camp (я изучаю HTML).Обивка в синей рамке вроде бы не ...... даже?

Например, если нижняя и правая части элемента, использующего класс синего поля, имеют 20 пикселей для нижнего и правого отступов, почему визуально кажется, что они не равны 20 пикселям для нижнего и правого отступов?Два расстояния между контентом и его границей явно различны .... что происходит?Спасибо за ваше время.

.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  padding: 20px 40px 20px 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 40px 20px 20px 40px;
}
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

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

Нажмите F12 в хром и познакомьтесь с инспектором.Когда вы найдете свои элементы, вы можете поиграть со стилем в реальном времени, чтобы лучше понять, как все это работает.

enter image description here enter image description here

0 голосов
/ 19 сентября 2018

О, это на самом деле даже.

Я создал для вас демонстрацию: 

.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  padding: 20px 40px 20px 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 40px 20px 20px 40px;
}

.box > div {
  background-color: #888;
}
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box"><div>padding: 20px 40px 20px 40px</div></h5>
  <h5 class="box blue-box"><div>padding: 40px 20px 20px 40px</div></h5>
</div>

Я думаю, что это прояснит, что происходит без слов.

Основная причина в том, что у вас есть text-align: center с коротким текстом, которыйзаставляет дисплей казаться неровным, но на самом деле он ровныйЕсли у вас есть текст полной ширины, «четность» будет казаться очевидной.

...