css块与块的间距

关于CSS块与块之间的间距，我们需要了解一下display属性。display的值可以是block、inline和inline-block。

block元素会独占一行，比如div、p等标签就是block元素，默认情况下这些元素之间会有一定的间距。

div {
    width: 100px;
    height: 100px;
    background-color: red;
}
    

上面的代码会生成一个宽高都为100px，背景色为红色的块元素。如果再加上一个相同的div元素，它们之间就会有一定的间距。

div>
    /div>
    div>
    /div>

但是inline元素与inline-block元素就不会产生间距了。inline元素指的是像a、strong、em这些标签，它们会在一行中显示；而inline-block元素指的是设置了display: inline-block的元素，它们可以设置宽高和内外边距，但是仍然会在一行中显示。

a {
    color: blue;
    text-decoration: none;
    padding: 10px;
    background-color: yellow;
}
span {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
}

上面的代码会生成一个文本链接和一个宽高为100px的块元素，它们在同一行中显示，且它们之间没有任何间距。

当然，我们可以使用margin属性来设置块与块之间的间距。比如在上面的代码中为span元素添加margin-right: 10px，就可以使它们之间有一定的间距了。

span {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-right: 10px;
}
    

除了margin-right，还有margin-left、margin-top和margin-bottom可以设置对应的间距。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！