Я немного смущен тем, как работает заполнение. Код ниже - это то, что у меня есть от 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>
0
minorproblem 19 Сен 2018 в 04:03

2 ответа

Лучший ответ

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

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

.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 с коротким текстом, из-за которого отображение кажется неровным, но на самом деле оно ровное. Если у вас полноширинный текст, «четность» будет казаться очевидной.

0
yqlim 19 Сен 2018 в 01:14

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

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

enter image description here enter image description here

1
Thomas Byy 19 Сен 2018 в 01:18