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

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

CSS

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

Вот что я хочу, чтобы он выглядел следующим образом:

Ответ 1

В этом случае элементы 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 - Reset `font-size`

Так как пробел между элементами inline определяется font-size, вы можете просто Reset 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>

Ответ 2

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

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

Ответ 3

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;
}

Ответ 4

Нашел решение, не связанное с 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;
}

Ответ 5

просто добавьте границу: 2px solid #e60000; на ваш второй тег CSS.

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

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

Ответ 6

Вы должны добавить

#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. Итак, вам нужно удалить его.