Что объясняет это поведение встроенного блока?

На этой странице показаны два изображения, каждый из которых содержится в отдельном диапазоне, отображаемом как встроенный блок. К первому изображению применяется дополнительный стиль «display: block», который удаляет пространство между изображением и нижней частью его зеленого диапазона (это пространство предоставляется для descenders, когда элемент имеет стиль как встроенный). Противоположно это пространство видно между вторым изображением (все еще отображаемым как встроенное) и синей границей второго пролета.Что объясняет это поведение встроенного блока?

Почему отображение первого изображения в виде блока создает пространство между областью первого изображения и элементом, содержащим диапазон (оранжевый ящик)? Это потому что, когда один встроенный элемент содержится внутри другого, пространства, выделенные для descenders, сливаются в виде вертикальных полей? Также мне интересно, почему существует однопиксельное пространство между верхней частью синего пролета и оранжевым контейнером.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<title>test</title> 

<style> 

.product_box { 
    border: 1px solid green; 
    display:inline-block; /* to put products side by side */ 
} 
.product_image { 
    display:block; 
} 
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */ 
    text-align:center; 
    border:1px solid orange; 
} 
#stats { 
    border:1px solid blue; 
    display: inline-block; 
} 


</style> 

</head> 

<body> 

    <div class="shop_box"> 
     <span class="product_box"> 
      <img class="product_image" src="http://i.imgur.com/o2udo.jpg"> 
     </span> 
     <span id="stats"> 
      <img src="http://i.imgur.com/o2udo.jpg" alt="test"> 
     </span> 
    </div> 

</body></html>

JSFiddle

источник

2011-12-20 jela

Я не знаю причину, но я знаю, что добавление ' line-height: 0' удалит белый зазор. Спасибо за скрипку, но «видеть» то, о чем вы говорили, было очень тяжело для меня. Вы можете использовать меньшее изображение, чтобы этот пробел был более очевидным. Http: // jsfiddle.net/A6aLW/1/ – mrtsherman

Всякий раз, когда есть любой пробел между два инлайн элементов в HTML, пробелы в них заставят разрыв между ними. Это происходит с вашими элементами <span>, потому что они являются встроенными элементами. Этот разрыв может быть удален путем удаления каких-либо пробелов между вашими двумя тегами пролетов, например:

<span class="product_box"> 
    <img class="product_image" src="http://i.imgur.com/o2udo.jpg"> 
</span><span id="stats"> 
    <img src="http://i.imgur.com/o2udo.jpg" alt="test"> 
</span>

Если изображения не установлены display: block, вы можете удалить дополнительное вертикальное-пространство, установив line-height: 0; на ваши <span> элементов.
Если вы устанавливаете свои изображения на display: block, вам кажется, что лучше всего использовать свойство vertical-align, чтобы выровнять их друг с другом; попробуйте:

.product_box, #stats { vertical-align: middle; }

Это, как правило, хорошая идея использовать CSS Reset при разработке, чтобы минимизировать влияние этих браузеров дефолта.

Обновленный код:

HTML:

<div class="shop_box"> 
    <span class="product_box"> 
     <img class="product_image" src="http://i.imgur.com/o2udo.jpg" /> 
    </span><span id="stats"> 
     <img src="http://i.imgur.com/o2udo.jpg" alt="test" /> 
    </span> 
</div>

CSS:

.product_box, #stats { 
    line-height: 0; 
    vertical-align: middle; } 
.product_box { 
    border: 1px solid green; 
    display:inline-block; /* to put products side by side */ 
} 
.product_image { 
    display:block; 
} 
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */ 
    text-align:center; 
    border:1px solid orange; 
} 
#stats { 
    border:1px solid blue; 
    display: inline-block; 
}

Preview: http://jsfiddle.net/Wexcode/4QNhG/

источник

2011-12-20 17:18:07 Wex

Даже при удалении всех пробелов я все еще вижу это? http://jsfiddle.net/A6aLW/2/ – mrtsherman

Это происходит потому, что один из тэгов '' установлен в 'display: block;'. Либо удалите «display: block;» из этого изображения, либо установите оба тега '' в 'vertical-align: middle;'. – Wex

А, я наконец-то вижу. +1 за хорошее объяснение. – mrtsherman

-1

Edit:

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

Что касается однопиксельного пространства: это только для учета границы другого элемента. Будь или не первое изображение дисплея блок не имеет значения:

Первого участка не границ: http://jsfiddle.net/A6aLW/3/
И не охватывает отсутствие границы: http://jsfiddle.net/A6aLW/5/

источник

2011-12-20 17:17:00

Что объясняет это поведение встроенного блока?

ответ

Смежные вопросы