верхнее поле и выравнивание текста работают для display-inline-block - PullRequest
Новая
       22

верхнее поле и выравнивание текста работают для display-inline-block

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

Я знаю, что левые и правые поля будут работать для display: inline и display-inline: block.Но, пожалуйста, уточните, работает ли top margin и text-align для любого из них.Если да, то почему?

1 Ответ

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

Браузеры обрабатывают встроенные элементы по-разному, когда дело доходит до полей и отступов.Хотя вы можете добавлять левые и правые поля / отступы, вы не можете добавлять их в верхнюю или нижнюю часть элемента.Это связано с тем, что встроенные элементы передаются с содержимым на странице так же, как ссылка или текст.Если бы вы могли установить верхнее / нижнее поле / отступ для встроенных элементов, это нарушило бы поток содержимого.

Что касается выравнивания текста, это работает как для элементов inline-block, так и inline.Ниже я добавил пример быстрого кода, показывающий text-align: center; на элементах display: inline; и display: inline-block;.В этом примере также показаны верхнее и нижнее поля, работающие для встроенного блока и не работающие для встроенного блока. 

.inline-block {
  display: inline-block;
  margin-top: 30px;
  margin-bottom: 10px;
}
.inline {
  display: inline;
  margin-top: 30px;
  margin-bottom: 10px;
}
/* Start demo styles (not required) */
* {
  box-sizing: border-box;
}
html,body {
  margin:0;
  background: #95a5a6;
}
.container {
  width:50%;
  margin: 50px auto;
  background: white;
  padding: 10px 20px;
  text-align: center;
  font-family: arial;
  font-size: 16px;
}
hr {
  border: none;
  height: 2px;
  width: 100%;
  background: black;
  display: block;
}
/* End demo styles */
<div class="container">
  <div class="inline-block">
    Inline-Block Content
  </div>
  <hr>
  <div class="inline">
    Inline Content
  </div>
</div>
...