Почему у Div с содержимым внутри есть автоматическая маржа?

Question

Хотелось бы знать, почему margin присутствует, когда есть содержимое (абзац и т. Д.) В <div>?

.container { 
 
    width: 300px; 
 
    height: 150px; 
 
    background-color: #ccc; 
 
} 
 
.container2 { 
 
    width: 300px; 
 
    height: 150px; 
 
    background-color: #000; 
 
}

<div class="container"> 
 
    <p>Text</p> 
 
</div> 
 

 
<div class="container2"> 
 
    <p>Text</p> 
 
</div>

В приведенном выше примере, есть разница между этими двумя <div> с, но если я вынимаю абзац, то margin ушел.

Почему это происходит?

Answer 1

Поскольку некоторые из HTML-тегов имеют разницу по умолчанию, в нее входит <p>, и она обрушивается. Обычный подход заключается в том, чтобы использовать CSS reset для создания сайтов точно как вы хотите, чтобы они выглядели.

Answer 2

Вы можете удалить все поля из всех элементов, делая что-то вроде этого в вашем CSS, с * таргетинга всех элементов:

*{margin:0px;} 

То есть, вероятно, немного экстремальный, и вы будете лучше с находя проверенный шаблон сброса CSS. Мне повезло с тем, что я нашел его несколько лет назад. Они сделали основной сброс, как это (выборочно удалять любые элементы, что хотели:

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    vertical-align: baseline; 
} 

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

Надеется, что это помогает!