margin-top溢出问题及解决方式（对父元素进行操作）

最新推荐文章于 2024-01-07 02:56:11 发布

今天也是爱大大的一天吖

最新推荐文章于 2024-01-07 02:56:11 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_45560350/article/details/113336790

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近写页面碰到的问题，给<body>的子元素<div>设置了一个margin-top:10px;，却出现了下面的效果

代码如下：

<--css-->
*{
  margin: 0;
   padding: 0;
 }
 div{
   width: 100%;
   height: 100%;
   margin:10px 0 0 0 ;
   background:skyblue;
 }
 <--html-->
<body>
    <div>123</div>
</body>

在这里插入图片描述

可以看到body和html之间存在一段距离
这段距离就是由于body的子元素的上外边距所造成的margin溢出问题

解决方法：

给body（即设置了上外边距的子元素的父元素）添加padding-top:0.1px;
设置的数值可以小一点（不能太小，否则没用），这样既能解决问题，又不至于让新设置的内边距对页面整体效果产生影响
给body（即设置了上外边距的子元素的父元素）添加border:1px solid transparent;
添加透明边框