margin работает неожиданным образом

Question

При прописании margin-top для header в ожидании отступа от верхней части блока-родителя, ничего не происходит, что в данном случае лучше всего предпринять?

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: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.main {
    width: 350px;
    height: 400px;
    background-color: rgb(28, 126, 126);
    margin: 0 auto;
    margin-top: 100px;
}

header {
    height: 80px;
    width: 300px;
    background-color: aqua;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Example</title>
</head>
<body>
    <div class="main">
        <header></header>
    </div>
</body>
</html>

Answer 1

Нет, не неожиданным образом, это предсказуемое поведение margin – схлопывание внешних отступов.

Или добавляйте padding в пиксель для родительского блока, или в принципе не пытайтесь отступы от родительского блока делать через margin у первого дочернего, а воспользуйтесь padding у родительского.

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: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.main {
    width: 350px;
    height: 400px;
    background-color: rgb(28, 126, 126);
    margin: 0 auto;
    margin-top: 100px;
    padding: 1px;
}

header {
    border: 5px solid #000;
    height: 80px;
    width: 300px;
    background-color: aqua;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Example</title>
</head>

<body>
  <div class="main">
    <header></header>
  </div>
</body>

</html>

БЛОГ НА HUSL

margin работает неожиданным образом

Ответы (1 шт):