Часто при верстке сайта возникает ситуация, когда между двумя блочно-строчными элементами (display:inline-block) появляется небольшой зазор. Например, есть два элемента div, которые выглядят так:
<div id="container">Первый блок</div>
<div id="container">Второй блок</div>
Стили для этих элементов выглядят так:
#container {
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
В результате эти два блока не идут напрямую друг за другом, а между ними есть небольшой зазор.
Причина этому — пробелы и переносы строк в HTML-коде, которые браузер воспринимает как пробельные символы, создающие зазор между элементами.
Есть несколько способов решения этой проблемы:
- Удаление пробелов в HTML-коде. Самый простой способ — это просто удалить пробел или перенос строки между закрывающим тегом первого div и открывающим тегом второго div.
<div id="container">Первый блок</div><div id="container">Второй блок</div>
- Использование отрицательного значения для margin. Можно задать отрицательное значение для margin, чтобы компенсировать пробелы.
#container {
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px -4px;
width:40%;
height:100px;
}
- Изменение font-size у родительского элемента. Если установить font-size равным 0 для родительского элемента, то пробелы между дочерними элементами исчезнут. Однако, нужно помнить, что это повлияет на размер текста внутри дочерних элементов, и его придется устанавливать отдельно.
.parent {
font-size: 0;
}
#container {
font-size: 16px;
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
Важно помнить, что ни один из этих методов не является «правильным» или «неправильным». Все они имеют свои плюсы и минусы, и выбор зависит от конкретной ситуации и предпочтений разработчика.
Добавить комментарий