div之间的空隙

Posted 2023-05-02

2个div只见也没有设置margin为什么还会空出一行来?我知道可以用*把margin设置为0，我就想知道为什么会有这个空行..还有其他办法么？

正常<div>之间是不会有回车的你检查一下，第一，有没有<br>或
<p>标记。
第二，你有没有定义全局的css，如 div margin:10px 10px之类的
第三，你可以试图着删除两个div之间所有的空格来看下效果 参考技术A 　　做法如下：
　　1、首先把div样式设为浮动(style="float:...")，假如我有两个div吧(div1和div2)，把div1设置为style="float:left",第二个可以不设
　　2、在div1的样式再加上这个属性“_margin-right:-3px”，注意前面有下划线“_”
　　示例：<div id='div1' style='float:left;_margin-right:-3px'>aaa</div>
　　<div id='div2'>bbb</div>
　　这样应该就可以 参考技术B 呵呵 因为浏览器默认是两个DIV上下有外边距的 所以当你设置为0的时候 就没间隙了! 这是浏览器的默认设置,没办法改的 只有自己设置才能覆盖默认设置! 参考技术C 首先我要问的是这2个div层之间有没有回车 比如<p>之类的
有<p> <br>之类的请去除
或者有没有 空格 也会影响
正常<div>之间是不会有空格的.

两个盒模型之间的空隙

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），这个大家都知道，那什么是两个盒模型之间的空隙呢？该怎么清除它呢？

假设有一个class为content的父div，里面包含两个子div，这两个子div要同一行显示，我们想要两个子div紧紧连接在一起，所以把它们的margin和padding值全部设为0。

 1 <style type="text/css">
 2     .red{
 3         display: inline-block;
 4         margin: 0;
 5         padding: 0;
 6         width: 100px;
 7         height: 100px;
 8         background: red;
 9     }
10     .green{
11         display: inline-block;
12         margin: 0;
13         padding: 0;
14         width: 100px;
15         height: 100px;
16         background: green;
17     }
18 </style>

1 <div class="content">
2     <div class="red"></div>
3     <div class="green"></div>
4 </div>

我们来看看结果

这时我们发现结果没有我们想象中那么美好，这是因为两个div之间还有些空白字符。我们有两种解决方法：

既然是空白字符的锅，我们就在父元素设置他们的font-size为0，或者，直接把空白字符删掉

1.方法一：font-size设为0

我们把父元素的font-size设置为0

1 .content{
2     font-size: 0px;
3 }

这时的效果还不是我们想要的，因为我们会发现子元素里面的字消失了。

这是因为子元素没有设置的样式会默认继承父元素的，所以我们在两个子元素设置相应的font-size就可以了，浏览器默认为16px

 1 .content{
 2     font-size: 0px;
 3 }
 4 .red{
 5     display: inline-block;
 6     margin: 0;
 7     padding: 0;
 8     width: 100px;
 9     height: 100px;
10     background: red;
11     font-size: 16px;
12 }
13 .green{
14     display: inline-block;
15     margin: 0;
16     padding: 0;
17     width: 100px;
18     height: 100px;
19     background: green;
20     font-size: 16px;
21 }

现在的结果就完美了

2.方法二：删除空白字符

这种做法虽然相对来说比较方便，但是个人特别不推荐这种做法，因为会影响我们对代码的阅读

1 <div class="content">
2     <div class="red">空白</div><div class="green">字符</div>
3 </div>

想象一下如果我们要做的不止一个盒子呢？看起来会特别乱，不利于后期维护，虽然说结果是一样的