[分享]css两个div有缝隙

很多时候，我们使用CSS布局时会遇到两个 元素之间出现了一些奇奇怪怪的缝隙，这个问题非常让人恼怒，但是这个问题的原因和解决方法都非常简单。第一个原因是浏览器为我们设置的默认样式，在HTML中，当每个...

很多时候，我们使用CSS布局时会遇到两个

<div>

元素之间出现了一些奇奇怪怪的缝隙，这个问题非常让人恼怒，但是这个问题的原因和解决方法都非常简单。

第一个原因是浏览器为我们设置的默认样式，在HTML中，当每个

<div>

元素之间有一个换行符时，浏览器会将这个换行符作为一个空格来处理，所以就会出现缝隙。

  <div>Content One</div>
        <div>Content Two</div> 

解决这个问题也很简单，我们只需要设置CSS样式将

<div>

元素的间隔设置为0，将其彻底去掉即可：

  div{
            margin: 0;
            padding: 0;
        } 

第二个原因是我们给

<div>

元素设置的边框或者背景样式，如果我们给每个

<div>

元素设置的背景色或者边框太大，那么就会出现缝隙，因为两个

<div>

元素之间的空间不够放下这个边框或者背景。

  div{
            background-color: #000;
            width: 100px;
            height: 50px;
        } 

这个问题也可以通过设置CSS样式解决，我们只需要将两个

<div>

元素之间的间隔变成负值，就可以将它们紧密地拼接在一起：

  div{
            margin: -1px;
            padding: 0;
        } 

总之，在CSS布局中经常会出现一些意想不到的问题，但我们只需要对这些问题有清晰的认识和扎实的技能，就可以迎刃而解。