Имеется контейнер на 1170px. В нем 3 элемента, каждый шириной по 370px. 2ой элемент имеет margin 30px слева и справа. Вопрос следующий: Почему когда я эти 3 элемента делаю блочными и выравниваю в контейнере с помощью float они все 3 влезают в одну строку. А когда делаю эти элементы Inline-block они не вмещаются целиком в одну строку? Скрины: inline-block http://prntscr.com/srvswn float http://prntscr.com/srvt9n
-
1Потому что, наверное, в html-коде между ними стоят пробельные символы– andreymalCommented 1 июн. 2020 в 18:53
-
лишних пробелов нету в html– Дмитрий ГавриловCommented 1 июн. 2020 в 18:57
-
Пишите исходный код в вопросе, так больше шансов, что ответят на ваш вопрос. Пробовать оценить проблему только по скринам это гадание. Но, в целом, первый комментарий, скорее всего, верный, у вас в коде есть символ (скорее всего, это перенос строки), который браузер преобразует в пробел. Это известная фича для inline-block: css-live.ru/articles/…– Сергей МаякCommented 1 июн. 2020 в 19:38
-
@ДмитрийГаврилов не должно быть не просто «лишних пробелов», не должно быть вообще никаких пробельных символов– andreymalCommented 1 июн. 2020 в 19:56
2 ответа
Inline-block помимо того, что имеет все элементы боксовой модели (margin/border/padding), также имеет и пробелы между блоками, как строчные элементы. Если вы между inline-block div уберите переводы строк и пробелы или закоментируйте переводы строк и пробелы, то отступы пропадут. Также есть несколько решений, например задать родительскому блоку font-size=0, а дочерним уже прописать нужный font-size; или как вариант задать родителю отрицательный letter-spacing, дочерним прописать нужный letter-spacing.
А вообще используйте flex и будет вам счастье!
Свойство 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>