问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么 CSS 中的边距没有填充背景色？

社区维基
1
新手上路，请多包涵

我有一段简单的 HTML。

为什么背景颜色不填充整个 #footer 元素的背景 - 具体来说，包括边距？

 <!doctype html>
<html>

<head>
  <style>
    #footer {
      background: #263238;
      margin: 100px;
      padding: 0;
    }
    .footer-text {
      margin: 0;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="footer">
    <div class="footer-text">All Rights Reserved © 2016</div>
  </div>
</body>

</html>

原文由 Hutarsh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssmargin
阅读 459
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您应该使用 padding 而不是 margin 如 CSS 的 盒模型 所述。

  • 边距提供 超出 元素框的空间，因此 不会 被着色——它只是空间。

  • 另一方面，填充在元素框的 内部 周围提供空间，并且被着色并受其他样式影响。

 <!doctype html>
<html>

  <head>
     <style>
        #footer {
           background: #263238;
           padding: 100px;
        }
        .footer-text {
           margin: 0;
           color: #fff;
        }
     </style>
  </head>

  <body>
     <div id="footer">
        <div class="footer-text">All Rights Reserved © 2016</div>
     </div>
  </body>

</html>

原文由 Fueled By Coffee 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

盒模型示例 这就是 css 盒模型的工作原理。 Tha 背景仅适用于 padding 和 content 区域，这就是为什么您在边缘看不到背景的原因。修复很简单，只需将 margin padding 。

原文由 Shlomi Haver 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题