CSS 边距推动 body 元素

发布于 2024-12-09 11:49:57 字数 740 浏览 0 评论 0原文

我为 div 元素设置了边距，但是 body 元素也获得了该边距。

考虑这段代码：

<!-- HTML -->
<body>
  <div>
  </div>
</body>

<!-- CSS -->
<style>
  html,body {
   height:100%;
   margin:0;
   padding:0;
   outline:1px solid blue;
  }

 div {
   margin:20px;
   outline:1px solid red;
 }

</style>

这是结果和问题：

到目前为止，我已经通过添加 border:1px Solid transparent; 属性。这会破坏 100% 的高度，因为由于 1px 边框而出现滚动条。为什么会发生这种情况？

可能的解决方案（感谢您的帮助）：添加 padding-top:1px 和 margin-top:-1px，这样 100 % height 不会被滚动条破坏，并且您正在避免边距折叠。

原文

I'm setting a margin for a div element, however the body element also gets that margin.

Consider this code:

<!-- HTML -->
<body>
  <div>
  </div>
</body>

<!-- CSS -->
<style>
  html,body {
   height:100%;
   margin:0;
   padding:0;
   outline:1px solid blue;
  }

 div {
   margin:20px;
   outline:1px solid red;
 }

</style>

This is the result and the problem:

So far I've solved the problem by adding a border:1px solid transparent; property to the body element. This ruins the 100% height because scrollbars appear due to the 1px border. Why does this happen?

POSSIBLE SOLUTION (thanks for the help): Add a padding-top:1px and a margin-top:-1px, this way the 100% height doesn't gets ruined with the scrollbars and your are avoiding margin collapsing.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧时模样 2024-12-16 11:49:57

这听起来类似于我遇到的问题：边距和负边距。我通过放置顶部填充而不是边框解决了我的问题，也许这更适合您的设计？否则请尝试此链接： http://www.seifi .org/css/understanding-taming-collapsing-margins-in-css.html

回复收藏 0 原文

此刻的回忆 2024-12-16 11:49:57

这是由称为边距折叠的效应引起的。

某些相邻的边距组合起来形成单个边距。据说这些利润率正在“崩溃”。如果没有非空内容、填充或边框区域或间隙来分隔边距，则边距是相邻的。

http://www.w3.org/TR/css3-box/#collapsing -边距

回复收藏 0 原文

神仙妹妹 2024-12-16 11:49:57

我知道这是一个老问题，但我只是想指出，在问题给出的示例中，可以使用填充而不是边距：

<!-- HTML -->
<body>
  <div>
    content
  </div>
</body>

<!-- CSS -->
<style>
  html, body {
    box-sizing: border-box; /* padding makes part of the */
    height: 100%;           /*  box whose height is 100% */
    margin: 0;
    padding: 0;
    outline: 1px solid blue;
  }
  
  body {
    padding: 20px;
  }
  
  div {
    outline: 1px solid red;
  }

</style>

I know this is an old question, but I just wanna point out that, in the example given in the question, one could use padding instead of margins:

<!-- HTML -->
<body>
  <div>
    content
  </div>
</body>

<!-- CSS -->
<style>
  html, body {
    box-sizing: border-box; /* padding makes part of the */
    height: 100%;           /*  box whose height is 100% */
    margin: 0;
    padding: 0;
    outline: 1px solid blue;
  }
  
  body {
    padding: 20px;
  }
  
  div {
    outline: 1px solid red;
  }

</style>

回复收藏 0 原文

~没有更多了~