без полей или отступов, но все же пространство между элементами div

Меня это не в первый раз смущает.

<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

#wrap {
width:400px;
height:200px;
background:red;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.content {
width:100px;
height:200px;
display:inline-block;
background:green;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

Вы можете лучше понять это при просмотре на JSFiddle.

Пример JSFiddle

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

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


html padding css margin positioning
person user3312607    schedule 04.06.2014    source источник
comment
Просто напишите всю разметку в одну строку: jsfiddle.net/e86L9/4.   -  person melancia    schedule 04.06.2014
comment
Это так мило :) jsfiddle.net/e86L9/3   -  person mingos    schedule 04.06.2014

Ответы (2)


arrow_upward
22
arrow_downward

Это связано с размером шрифта. Вам нужно будет установить font-size: 0px в элементе #wrap. http://jsfiddle.net/52eaz/

person Stefan Dunn    schedule 04.06.2014
comment
я выбрал это решение, потому что оно имеет для меня наименьший смысл, если вообще имеет смысл. хотя работает отлично, спасибо, приятель. - person user3312607; 04.06.2014
comment
Я бы посоветовал вам выбрать его в качестве ответа для будущих пользователей. - person Stefan Dunn; 04.06.2014
comment
Простое объяснение заключается в том, что свойство CSS letter-spacing по умолчанию пропорционально значению font-size (что предотвращает слипание букв [и других встроенных элементов] вместе). Параметр font-size: 0 удаляет этот интервал. - person Stefan Dunn; 29.01.2019

arrow_upward
0
arrow_downward

Вы хотите что-то вроде этого?

http://jsfiddle.net/e86L9/12/

#wrap {
    width:400px;
    height:200px;
    background:red;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

.content {
    float:left;
    width:100px;
    height:200px;

    background:green;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
person faby    schedule 04.06.2014