Удалите невидимое поле между тегами div

по какой-то причине я не могу понять, почему это делается, но мои теги div имеют небольшой явный запас между каждым, делающим теги div не друг с другом. У кого-нибудь есть идея, где я ошибаюсь?Удалите невидимое поле между тегами div

Спасибо.

body { 
 
    background-color: #E8E8E8; 
 
} 
 
#content { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 
#header { 
 
    background-color: #4C66A4; 
 
} 
 
#mainBody { 
 
    background-color: #FFF; 
 
} 
 
#footer { 
 
    background-color: #4C66A4; 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="header"> 
 
     <p>header</p> 
 
    </div> 
 
    <div id="mainBody"> 
 
     <p>body</p> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body>

источник

2017-02-07 G.Hamton

Это поле по умолчанию элементов P. Пойдите исследование _collapsing margins_. – CBroe

Поскольку браузеры автоматически добавляет некоторый запас до и после каждого <p> элемента вам необходимо установить <p> запас в (ноль) следующим образом:

body { 
 
    background-color: #E8E8E8; 
 
} 
 
#content { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 
#header { 
 
    background-color: #4C66A4; 
 
} 
 
#mainBody { 
 
    background-color: #FFF; 
 
} 
 
#footer { 
 
    background-color: #4C66A4; 
 
} 
 

 
#mainBody > p, #header > p, #footer > p { 
 
    margin: 0; /*set all <p> elements inside the div id of #mainBody, #header and #footer into margin: 0*/ 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="header"> 
 
     <p>header</p> 
 
    </div> 
 
    <div id="mainBody"> 
 
     <p>body</p> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body>

источник

2017-02-07 14:44:26 prtdomingo

Просто удалите запас р элементов по умолчанию.

p { 
    margin: 0; 
}

источник

2017-02-07 14:38:36 Aer0

добавить р {поле: 0px;}

body { 
 
    background-color: #E8E8E8; 
 
} 
 
#content { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 
#header { 
 
    background-color: #4C66A4; 
 
} 
 
#mainBody { 
 
    background-color: #FFF; 
 
} 
 
#footer { 
 
    background-color: #4C66A4; 
 
} 
 
p { 
 
margin: 0px; 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="header"> 
 
     <p>header</p> 
 
    </div> 
 
    <div id="mainBody"> 
 
     <p>body</p> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body>

источник

2017-02-07 14:40:04 xfactor11

Удалите невидимое поле между тегами div

ответ

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