Remove по умолчанию белое пространство вокруг рядный блок elemnts

Question

Если у меня есть следующий код:

<div class="inline"></div> 
<div class="inline"></div> 

.inline { 
    display: inline-block; 
    height: 100px; 
    width: 100px; 
    background: red; 
} 

Вы заметите, что там, кажется, некоторые по умолчанию пустое пространство еще вокруг divs. И единственный способ, которым я могу это исправить:

<div class="inline"></div><div class="inline"></div> 

Это делает мою разметку неопрятной. Могу ли я исправить это только в CSS?

Answer 1

Вы можете попробовать добавить размер в 0 шрифта в контейнер div. Но вам нужно изменить другие размеры шрифта внутри DIV индивидуально:

CSS

.container { 
    font-size: 0; 
} 

.inline { 
    display: inline-block; 
    height: 100px; 
    width: 100px; 
    font-size: 10px; 
    background: red; 
} 

HTML

<div class="container"> 
    <div class="inline"></div> 
    <div class="inline"></div> 
</div> 

рабочая скрипку можно найти HERE.

Не идеальное решение. Но это сработало для меня. Другое решение - это то, что вы указали выше.

Answer 2

Посмотрите на очень хорошую статью, которая поставляется с несколькими различными подходами: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ и выберите лучшую ель для вас.

Answer 3

Вы можете достичь этого путем оборачивать их внутри flex-box Создание родителя для них и давая display: flex родителю будет работать

.inline { 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
} 
 
.container{ 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div class="inline"></div> 
 
    <div class="inline"></div> 
 
</div>