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>之间是不会有空格的.

div和img之间的缝隙问题

      这次做的项目，客户说。banner图的上下之间不要留有空隙，细致一看才发现，上下居然都有空隙。审查元素，发现全部的div,img的padding和margin都是0，对于这个间隙到底是假设产生的真的是找不到原因。

    网上查了一下，类似的问题还蛮多的。

    解决方法基本是四种：

    1.将img设置为block;

    这个基本能够解决img和div下方的缝隙问题。

    2.设置img的竖直对齐方式

     v-align:bottom;

    3.设置父div的font-size:0

    4.设置外层的div的line-height:0

     推荐使用第一种方式。

     可是本次项目奇怪的地方在于上下皆有缝隙，開始时，上面的缝隙能够通过margin-top:-10px解决。可是后来改了代码结构后，此方式也不行。

网上找了非常多，亦没有解决方案。

    因此採用定位的方式解决：

    设置父元素的position为relative

    子元素img的position为absolute;设置top为0，完美解决此问题。

    为了避免影响其它布局，设置下div的高度为img的高度。

    问题出现的原因依然没有找到，仅仅是攻克了这个问题。解决这个问题的方式有非常多。只是郁闷的是经常攻克了问题。却不知道为了是如何发生了，不利于日后写代码的过程中去避免这些问题。