html – 推动body元素的CSS边距

前端之家收集整理的这篇文章主要介绍了html – 推动body元素的CSS边距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我为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>

这是结果和问题:

到目前为止,我通过添加边框解决了这个问题:1px实心透明;身体元素的属性.这会破坏100%的高度,因为由于1px边框而出现滚动条.为什么会这样?

可能的解决方案(感谢您的帮助):添加一个填充顶部:1px和一个margin-top:-1px,这样100%的高度不会被滚动条破坏,你的避免边缘折叠.

解决方法

这听起来像我遇到的问题: Margins and negative margins.我通过填充顶部而不是边框​​来解决我的问题,也许这对你的设计稍微好一点?否则尝试此链接http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
原文链接:https://www.f2er.com/html/232001.html

猜你在找的HTML相关文章