如何消除div之间的空隙

问题描述:三个div,变成行内块(display:inline-block)之后,div之间会产生空隙;如图所示:
如何消除div之间的空隙_第1张图片
产生的原因:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小div在大div中居中的方法title>
    <style>
    .parent {
          width:600px;
          height:200px;
          border:2px solid #000;
          /*font-size: 0;*/
        }
    .child {
        width:150px;
        height:100px;
        margin: auto; 
        display: inline-block; 
    }
    .parent>div:nth-child(1){
        background: red;
    }
    .parent>div:nth-child(2){
        background: blue;
    }
    .parent>div:nth-child(3){
        background: green;
    }
    style>
head>
<body>

    <div class="parent">
        <div class="child">div>
        <div class="child">div>
        <div class="child">div>
    div>
body>
html>

浏览器解析的时候,会把行内元素(包括行内块元素)之间的回车换行符解析成一定的间隙,间隙的大小跟默认的字体大小设置有关。
解决办法:将其父元素加上font-size:0的属性,这样就不会有间隙了。注意哦,如果有字,就会看不见了。或者下面这种不换行的写法,但是实际开发中是不现实的。

    <div class="parent">
        <div class="child">div><div class="child">div><div class="child">div>
    div>

你可能感兴趣的:(css)