Размещение элементов в контейнере

Question

Всем привет. Ситуация: есть контейнер, ширина 1140px. В нем есть 2 картинки с размером 555/555px, и у первой margin-right: 30px;, у второй - отсутствует. При этом вторая картинка переносится на второю строку, в одной не помещается, влезает только при margin-right: 26px. В чем может быть проблема? как убрать эти фантомные отступы, которые мешают им влезть в 1 строку? Если при таких величинах ширина и должна быть как раз те 1140px. Заранее благодарен

Answer 1

Можно сделать так.

div {
  width: 1140px;
  font-size: 0;
}
img {
  width: 555px;
  height: 200px;
}
img:first-child {
  margin-right: 30px;
}

<div>
  <img src="https://www.humanesociety.org/sites/default/files/styles/1240x698/public/2018/08/kitten-440379.jpg?h=c8d00152&itok=1fdekAh2" alt="">
  <img src="https://cdn.britannica.com/67/197567-131-1645A26E/Scottish-fold-cat-feline.jpg" alt="">
</div>

Почитать об этом можно тут. Ниже приведён немного отредактированный кусок из статьи.

Причина фантомных отступов в том, что браузер создаёт пустой текстовый узел (эта тема вроде как связана с JavaScript'ом и DOM, но можно интуитивно понять), который, по сути, может являться переводом строки, пробелом или, например, табом. Все и эти перечисленные вещи превращаются в один единственный пробел и описывается следующей сущностью:  . Следует учитывать, что, так как пробел — это обычный символ, то, соответственно, и изменяться этот символ будет в зависимости от размера или семейства шрифта, т.е, по сути, вести себя также, как и обычная буква в строке. Так как это текстовый узел, при добавлении родителю наследуемого свойства font-size со значением 0, он перестаёт отображаться.

БЛОГ НА HUSL

Размещение элементов в контейнере

Ответы (1 шт):