Почему существует необъяснимый разрыв между этими элементами div встроенного блока?

у меня есть два встроенных блока div элементы, которые являются одинаковыми, расположены рядом друг с другом. Однако, похоже, между двумя дивами есть таинственное пространство в 4 пикселя, несмотря на то, что поле установлено в 0. Нет родительских дивов, воздействующих на них - что происходит?

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

вот как я хочу, чтобы это выглядело:

6 242
html css padding margin

6 ответов:

в таком случае div элементы были изменены с block элементы уровня inline элементы. Типичная характеристика inline элементы-это то, что они уважают пробелы в разметке. Это объясняет, почему пробел пространства между элементами. (пример)

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

метод 1-Удалите пробелы из разметка

Пример 1 - прокомментируйте пробелы:(пример)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Пример 2 - удалить разрывы строк: (пример)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Пример 3 - закрыть часть тега на следующей строке (пример)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Пример 4 - закрыть весь тег на следующий линия:(пример)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Метод 2-сброс font-size

так как пробелы между inline элементы определяется font-size, вы можете просто сбросить font-size до 0, и таким образом удалить пространство между элементами.

просто набор font-size: 0 на родительских элементах, а затем объявить новый font-size для дочерних элементов. Это работает, как показано ниже (пример)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

этот метод работает довольно хорошо, так как он не требует изменения разметки; однако он не работает, если дочерний элемент font-size объявляется с помощью em единицы. Поэтому я бы рекомендовал удалить пробелы из разметки, или альтернативно плавающие элементы и, таким образом, избегая пространства создается с помощью inline элементы.

Метод 3-установить родителя элемент display: flex

в некоторых случаях вы также можете установить display родительского элемента flex. (пример)

это эффективно удаляет пробелы между элементами поддерживаемые браузеры. Не забудьте добавить соответствующие префиксы поставщиков для дополнительной поддержки.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}


.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}
<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

стороны Примечания:

это невероятно ненадежно использовать отрицательные поля для удаления пробела между inline элементы. Пожалуйста, не используйте отрицательные поля, если есть другие, более оптимальные решения.

489

используя inline-block позволяет использовать пробел в вашем HTML, это обычно приравнивается .25em (или 4px).

вы можете либо прокомментировать пробел, либо, более общее решение, установить родительский font-size до 0 и сброс его обратно до требуемого размера на элементах встроенного блока.

31

inline-block автоматически устанавливает значение по умолчанию white-space как все говорят. (Это связано с элементами "встроенных" свойств, так же, как расстояние между словами в строке текста в вашем HTML разметки. Вот почему удаление white-space в разметке тоже работает.) Самое простое исправление-это просто float контейнер. (напр. float: left;) на другой ноте, в каждом id должно быть уникальным, то есть вы не можете использовать то же самое id дважды в одном и том же HTML документ. Вместо этого вы должны использовать классы, где вы можете использовать то же самое class для нескольких элементов.

.container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}
14

найдено решение, не включающее Flex, потому что Flex не работает в старых браузерах. Пример:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}
1

просто добавить границы: 2px solid #e60000; для вашего 2-го div тега CSS.

определенно это работает

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}
0

вам нужно добавить

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

потому что всякий раз, когда вы пишите display:inline-block требуется дополнительный margin-right:4px. Итак, вам нужно удалить его.

0