0

Имеется контейнер на 1170px. В нем 3 элемента, каждый шириной по 370px. 2ой элемент имеет margin 30px слева и справа. Вопрос следующий: Почему когда я эти 3 элемента делаю блочными и выравниваю в контейнере с помощью float они все 3 влезают в одну строку. А когда делаю эти элементы Inline-block они не вмещаются целиком в одну строку? Скрины: inline-block http://prntscr.com/srvswn float http://prntscr.com/srvt9n

4
  • 1
    Потому что, наверное, в html-коде между ними стоят пробельные символы
    – andreymal
    1 июн 2020 в 18:53
  • лишних пробелов нету в html 1 июн 2020 в 18:57
  • Пишите исходный код в вопросе, так больше шансов, что ответят на ваш вопрос. Пробовать оценить проблему только по скринам это гадание. Но, в целом, первый комментарий, скорее всего, верный, у вас в коде есть символ (скорее всего, это перенос строки), который браузер преобразует в пробел. Это известная фича для inline-block: css-live.ru/articles/… 1 июн 2020 в 19:38
  • @ДмитрийГаврилов не должно быть не просто «лишних пробелов», не должно быть вообще никаких пробельных символов
    – andreymal
    1 июн 2020 в 19:56

2 ответа 2

2

Inline-block помимо того, что имеет все элементы боксовой модели (margin/border/padding), также имеет и пробелы между блоками, как строчные элементы. Если вы между inline-block div уберите переводы строк и пробелы или закоментируйте переводы строк и пробелы, то отступы пропадут. Также есть несколько решений, например задать родительскому блоку font-size=0, а дочерним уже прописать нужный font-size; или как вариант задать родителю отрицательный letter-spacing, дочерним прописать нужный letter-spacing.

А вообще используйте flex и будет вам счастье!

1

Свойство float - это обтекание элемента Элемент удаляется из обычного потока страницы, хотя все еще остается частью потока (в отличие от абсолютного позиционирования). (https://developer.mozilla.org/en-US/docs/Web/CSS/float)

Значение inline-block свойства display- заставляет обтекать элемент, но при этом оставляет его в потоке с присущими свойствами

Ниже в коде наглядно разница поведения элементов

.block{
  border: 1px solid black;
  width: 150px;
  display: inline-block;
}

.block2{
   border: 1px solid black;
   width: 150px;
   float: left;
}

.block3{
  border: 1px solid black;
  width: 150px;
 margin: 0;
  display: inline-block;
}
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi corrupti, atque, fuga nisi cumque minus voluptates repellat possimus modi soluta consequuntur voluptatem quidem aut aperiam numquam deserunt velit sunt! Architecto?</div>
<div class="block">Eius quisquam, dolorum ab assumenda magnam eveniet, commodi. Repellat quo odio ipsum quibusdam consequatur reiciendis ipsam debitis laboriosam, nemo deleniti, vero, quos nesciunt. Quia, commodi, corrupti. Similique consectetur consequatur voluptatem.</div>
<div class="block">Distinctio consectetur facere eius illo doloribus deserunt quibusdam debitis, officiis in amet cumque unde a ipsa voluptate veniam perferendis corporis voluptatibus autem minus esse optio omnis est excepturi? Delectus, ullam!</div>

<div class="separate"></div>

<div class="block2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam eaque odio sit repellat harum expedita, impedit non, aut quae ratione, voluptatum recusandae. Dolorem, eum, nemo ducimus eius corporis minus quia.</div>
<div class="block2">Odit quisquam odio labore molestias pariatur non, eius, facilis minus reiciendis, ut praesentium! Cum perspiciatis iure saepe distinctio quas aut assumenda. Nulla, assumenda. Nostrum a, laudantium reiciendis porro nesciunt ad.</div>
<div class="block2">Excepturi sed iure corporis nobis officiis repellendus et quod odit illum ad consectetur dolores saepe, facilis magni nulla asperiores earum? Rerum cupiditate, deleniti! Modi autem ipsum, tenetur sint neque, dignissimos.</div>

<div class="separate"></div>

<div class="block3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni tempora, enim iure natus aperiam doloribus numquam nostrum impedit ducimus quidem laborum officiis doloremque sunt quasi inventore odio assumenda possimus dolorum!</div>
<div class="block3">Omnis nesciunt mollitia delectus, similique eaque sint? Consequatur alias totam blanditiis praesentium cupiditate error corporis voluptatem quod laborum nam, in architecto rem doloremque, incidunt tenetur tempora hic ea ipsam officiis.</div>
<div class="block3">Aspernatur corporis distinctio odit sunt animi nulla provident porro tenetur vel aliquid voluptates architecto perferendis minima, fugit, veniam, dolore natus doloremque dolores pariatur culpa. Illum dolor aspernatur alias eius, nulla.</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.