上下div之间有间距的问题

最新推荐文章于 2024-08-02 11:41:11 发布

原创最新推荐文章于 2024-08-02 11:41:11 发布 · 1.6w 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#css #div

技术问题解决专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用CSS去除HTML页面中DIV元素间的默认间距，通过调整body的font-size和margin属性，实现布局紧密排列，同时保持文字正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我写了4个div,上下分布,均存在间距,代码以及效果如下:

.div1{
               height:100px;
               background-color:blue;
               position:relative;
   }
   .div2 {
               height:100px;
               background-color:blueviolet;
               position:relative;
   }
   .div3{
               height:100px;
               background-color:red;
               position:relative;
   }
   .div4{
               height:100px;
               background-color:yellow;
               position:relative;
   }
<body>
   <div class="div1" ></div>
    <div class="div2"></div>
    <div class="div3"></div>
     <div class="div4"></div>
</body>

然后,我尝试在每个div中加margin:0来去掉div之间的间距,代码如下:

.div1{
               height:100px;
               background-color:blue;
               position:relative;
               margin: 0;
   }
   .div2 {
               height:100px;
               background-color:blueviolet;
               position:relative;
               margin: 0;
   }
   .div3{
               height:100px;
               background-color:red;
               position:relative;
               margin: 0;
   }
   .div4{
               height:100px;
               background-color:yellow;
               position:relative;
               margin: 0;
   }

结果效果不变,依然有间隙,如下图:

接下来我进行了百度,找到了一个方法,设置font-size,如下代码以及效果:

body{font-size:0;}
   .div1{
               height:100px;
               background-color:blue;
               position:relative;
   }
   .div2 {
               height:100px;
               background-color:blueviolet;
               position:relative;
   }
   .div3{
               height:100px;
               background-color:red;
               position:relative;
   }
   .div4{
               height:100px;
               background-color:yellow;
               position:relative;
   }

上面代码重点添加了body{font-size:0;},其效果如下:

可以看到div上下之间的间隙消除了.然而,最上面和最左面依然有间隙.

对此,我是这么做的,添加了body{margin:0px;},代码如下:

body{margin:0px;}
body{font-size:0;}
   .div1{
               height:100px;
               background-color:blue;
               position:relative;
   }
   .div2 {
               height:100px;
               background-color:blueviolet;
               position:relative;
   }
   .div3{
               height:100px;
               background-color:red;
               position:relative;
   }
   .div4{
               height:100px;
               background-color:yellow;
               position:relative;
   }