вертикальный зазор между элементами с запасом 0

Я знаю, что этот вопрос имеет been asked раньше, но я не понимаю, как элементы с margin:0 имели разницу в краю - у них был запас «расширен» для меня . 15px вертикальный зазор между двумя элементами - <header> & <nav>вертикальный зазор между элементами с запасом 0

Вот HTML код, я использую:

<div id="container"> 
    <header> 
     <div class="logo">...</div> 
    </header> 
    <nav> 
     ... 
    </nav> 
</div>

и CSS стили:

#container { 
    width: 1178px; 
    margin: 0 auto; 
    background-color: #FFF; 
} 
header { 
    height: 102px; 
    background-color: #000; 
    background-image: url(images/header-bg.jpg); 
    margin: 0; 
} 
nav { 
    height: 51px; 
    background-image: url(images/navigation-bg.jpg); 
    background-repeat: repeat-x; 
    margin: 0; 
} 
.logo { 
    width: 268px; 
    height: 69px; 
    padding: 22px 0 0 31px; 
    margin: 0; 
    float: left; 
}

jsfiddle здесь.

источник

2016-03-03 Steve

15px разрыв между ними? Я не мог получить от вашего текущего кода. У вас может быть разрыв в 22 пикселя, поскольку вы применили прокладку к логотипу. –

Можете ли вы сделать jsfiddle или plnkr? – martin

Вы пытаетесь понять правила краха? Затем [это] (http://stackoverflow.com/questions/35337043/when-i-try-to-shift-the-image-upwards-using-negative-margin-the-whale-container/35337103#35337103) будет помогите вам лучше. –

Вы должны установить margin: 0; для элемента <ul>.

По умолчанию в браузерах установлены margin-top и margin-bottom - 15px.

#menu-primary-menu { 
    list-style-type: none; 
    margin: 0; 
}

Вы можете видеть на изображении ниже, что <ul> элемент имеет margin-top: 15px, даже если вы не установили сами.

Btw, если вы хотите сохранить, что margin-bottom: 15px затем установить его на <nav> элемент не <ul>, потому что внутри <nav>. https://jsfiddle.net/cq0LwL8f/1/

источник

2016-03-03 07:41:53 martin

Спасибо @Martin. Вы говорите, что если я устанавливаю только «margin-bottom: 15px;' the margin-top: 'также установлен на' 15px'? – Steve

Нет, 'margin-top' всегда устанавливается браузером по умолчанию, даже если вы его стиль каким-либо образом не стираете. – martin

Справа. Не знал этого. Необычный. Благодарю. – Steve

В качестве родительских элементов распада, когда дочерний элемент дается float:left или float:right. Вам нужно очистить float в родительском элементе, здесь в вашем случае родительский UL, а child - LI.

См следующего CSS, это может решить:

Предполагая, что этот HTML структуру:

<ul class="clear"> 
    <li class="floated">...</li> 
    <li class="floated">...</li> 
    <li class="floated">...</li> 
</ul> 

.clear:before, 
.clear:after { 
    content: " "; 
    display: table; 
} 

.clear:after { 
    clear: both; 
}

Также 15px разрыва вы видите из-за margin-bottom:15px данными.

#menu-primary-menu { 
    list-style-type: none; 
    margin-bottom: 15px; 
}

Вы можете соответствующим образом отрегулировать запас (если требуется).

источник

2016-03-03 07:49:23

Спасибо @Nukul Ghosh! – Steve

вертикальный зазор между элементами с запасом 0

ответ

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