Промежуток между Divs - Непонимание Почему это

-1

Я разрабатываю макет, который будет использоваться на социальном сайте. Сайт позволяет использовать CSS/HTML-элементы. В моем дизайне есть разрыв между двумя моими сложенными div. В моем коде нет пробелов, поэтому я не понимаю, почему он есть.Промежуток между Divs - Непонимание Почему это

Вот скриншот: Черное пространство между изображением заголовка и меню - это пробел. enter image description here

Вот мой HTML:

<!DOCTYPE HTML> 
<head> 
<link rel="stylesheet" href="vfErin.css"> 
</head> 
<html> 
<body> 
<div id="customProfile"> 
<div id="customHeader"> 
    <img src="http://assets.jollyrogerpcs.com/vampirefreaks/axel/cover.png" width="100%"> 
</div> 
<div id="customMenu"> 
    <a href="#">VF Home</a> 
    <a href="#">Gallery</a> 
    <a href="#">Journal</a> 
    <a href="#">Add Me</a> 
    <a href="#">Rate & Comment</a> 
</div> 
</div> 
</body> 
</html>

И мой CSS:

/* 
#67C8FF neon-blue 
#83F52C neon-green 
*/ 
* { 
    padding: 0; 
    margin: 0; 
    text-decoration: none; 
    border: none; 
    outline: none; 
    list-style: none; 
    transition: all 0.5s; 
} 
body { 
    background-color: #000; 
    text-align: center; 
} 
#customProfile { 
    width: 900px; 
    margin: 0 auto; 
    text-align: left; 
    border-left: 1px solid #67C8FF; 
    border-right: 1px solid #67C8FF; 

} 
#customMenu { 
    width: 900px; 
    font-size: 0pt; 
} 
#customMenu a:link, #customMenu a:visited { 
    display: inline-block; 
    width: 20%; 
    text-align: center; 
    background-color: #67c8ff; 
    font-size: 14pt; 
    height: 30px; 
    line-height: 30px; 
}

источник

2015-05-23 Jesse Elser

Сообщите изображение, чтобы быть элементом уровня блока, как так:

img { 
    display: block; 
}

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

EDIT: http://jsfiddle.net/z91kwzhw/1/

источник

2015-05-23 03:26:01 gautsch

Нечетные решение, поскольку IMG находится внутри DIV, который должен автоматически блоковый элемент, если я не ошибаюсь. Возможно, я пропустил что-то в своем коде. –

Вместо класса на img вы также можете использовать контекст: '#customHeader img {display: block; } ' – connexo

Вы правы, divs являются элементами блока, но изображение все еще является встроенным блоком, живущим внутри элемента блока. Он не наследует свойства блока его родителя, поэтому вам нужно заставить его быть блоком. – gautsch

Промежуток между Divs - Непонимание Почему это

ответ

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