父元素在html css中占据子元素的边距？ [复制]答案

【问题标题】：parent element take margin of child element in html css? [duplicate]父元素在html css中占据子元素的边距？ [复制]
【发布时间】：2022-02-11 16:49:16
【问题描述】：

强文本

我不明白为什么当我给他的孩子（.navigation）margin-top 时我的标题会下降？如果我给填充它没关系我的标题保持在顶部但为什么不给保证金

我研究了 ovorflow: auto fix the problem（是的）但是为什么呢？谁能解释一下

/* RESET */

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}


/* VARIABLES */


:root {
    --pimery_color: #fff;
    --accent: #FBD784;
}



/* BODY */

body {
    font-family: 'Gilroy';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: var(--pimery_color);
    background-color: #0B1D26;
}




/* HEADER */

.header {
    background-color: red;
}   

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:100px;
    
}

<header class="header">
      <div class="navigation">
        <p class="logo">MNTN</p>
        <nav class="nav">
          <ul>
            <a href="#">Equipment</a>
          </ul>
          <ul>
            <a href="#">About us</a>
          </ul>
          <ul>
            <a href="#">Blog</a>
          </ul>
        </nav>
        <div class="account">
          <img src="./img/svg/acc.png" alt="account logo for login" />
          <a href="#">Account</a>
        </div>
      </div>
    </header>

【问题讨论】：

请注意您没有正确使用ul，导致您的HTML无效。 ul 只能有 li 孩子，不能有 a。

标签： html css margin

【解决方案1】：

这是一个更普遍的问题，称为边距折叠。如果你有一个父元素和一个子元素，并且你给子元素一些边距，那么这些边距不会被父元素包含，它们会去到父元素的外部。

有一些方法可以防止这种行为。一种方法是向父元素添加一些内边距：如果这样做，父元素内边距将在内部包含子元素边距。

【讨论】：