Блог

Главная - Вопросы по программированию - Элемент встроенного блока, выталкивающий другие элементы iinline-block

Элемент встроенного блока, выталкивающий другие элементы iinline-block

#html #css

#HTML #css

Вопрос:

Почему элементы встроенного блока, такие как spans, другие элементы встроенного блока выталкивают, кроме них, например

 <span>Span 1</span>
<span>Span 2</span>
<span style="margin-top">Span 3</span>

переместит все интервалы 1 и 2 туда, куда идет интервал 3?

Комментарии:

1. wut? Прежде всего: промежутки по умолчанию не являются встроенными блоками; они встроенные. Если вы хотите, чтобы они были встроенными, вам нужно указать это. Во-вторых: style=»margin-top» не имеет смысла, вы забыли значение, например: «margin-top: 20px;» но это не сработает, потому что встроенные элементы не будут работать с полями. Последнее: я не понимаю вашего вопроса

2. О, подождите, теперь я понимаю, что вы имеете в виду. Именно так работают встроенные блоки, они выравниваются по базовой линии. Если вы хотите выровнять их по верху, попробуйте установить display: block; и float: left;

3. Нет, встроенные блоки выравниваются baseline по умолчанию … не снизу. Они совершенно разные.

4. @JonasGrumann Почему вы добавили код, который не был частью вопроса?

5. @JonasGrumann Никогда не добавляйте код, по крайней мере, перед тем, как спросить OP об их намерении

Ответ №1:

Поскольку блоки выровнены по базовой линии — нижней части типичных букв:

 span {
  display: inline-block;
  background: silver;
}

p {
  border: 1px dotted red;
}  
 <p>
  Base line goes here __________
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span> _______
</p>

<p>
  Base line goes here __________
  <span>Span 1</span>
  <span>Span 2</span>
  <span style="margin-top: 1em;">Span 3</span> _______
</p>

<p>
  Base line goes here __________
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3<br>Span 3</span> _______
</p>

Комментарии:

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

2. Это воображаемая линия в основании всех букв.

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