如何让 div 有边距，但其他没有？答案

【问题标题】：How do I make a div have a margin, but others not?如何让 div 有边距，但其他没有？
【发布时间】：2014-01-26 06:25:24
【问题描述】：

我制作了一个名为 navbar 的 div，它通过将 body 设置为以下样式：

body {
margin: 0;
}

但现在我想创建一个在导航栏下没有边距的 div。如何制作一个没有边距的 div 和一个有边距的 div？

【问题讨论】：

标签： html margin

【解决方案1】：

假设你在 body 中有 2 个 div：

<body>
   <div id="div1"></div>
   <div id="div2"></div>
</body>

你的 CSS：

body {
margin: 0;
}

#div1 {margin:0}
#div2 {margin:5px}//or auto or whatever

您可以通过为特定元素（或类）分配 id 来定位特定元素。

您的问题有点令人困惑，因为您为正文设置了 0 边距。 0 = 据我所知，没有边距。但是，我提到的规则将帮助您轻松解决这个问题。

希望这会有所帮助！

【讨论】：

【解决方案2】：

body {
   margin: 0;
}

在您上面的代码中，它只是为正文提供了 0 的边距。它并没有为页面中的所有元素提供 0 的边距。看起来这就是您认为它会做的事情。如果你想给所有元素，body, p, ul, li, h1, etc 0 的边距，它会这样写

* {
   margin: 0;
}

* 是一个通用选择器。

有很多方法可以给元素添加边距。

假设您有以下 html：

<header id="header">
    <div class="nav">
       <ul>
         <li>Menuitem1</li>

         <li>Menuitem2</li>

         <li>Menuitem3</li>

         <li>Menuitem4</li>
       </ul>
     </div>
   </header>

你可以给所有的导航菜单 li's by

.nav li {
    margin: 10px;
}

这将使 li 的所有边都有 10px 的边距。上、右、下和左。

下面的示例将给顶部和底部的边距设置为 0，但在左右两侧设置 5px 的边距。

.nav li {
    margin: 0 5px;
}

下面的示例将在右侧留出 8px 的边距。

.nav li {
    margin: 0 8px 0 0;
}

现在假设您想为页眉设置下边距。

header {
    margin: 0 0 50px 0;
}

您还可以使用 % 的边距以使其具有响应性。

header {
    margin: 0 0 10% 0;
}

【讨论】：

【解决方案3】：

一种选择是将 css 分配到 id 而不是标记上

【讨论】：