子元素怎样隐藏在父元素内？ inline-block 为什么有间隙？

一、隐藏 ：在父元素里写

overflow： hidden 隐藏超出父元素的部分

overflow：scroll 超出部分会有滚动条的出现

overflow-x：hidden x轴隐藏

        .fa {
            width: 200px;
            height: 200px;
            border: 1px solid;
            overflow: scroll;
        }
        .son {
            width: 300px;
            height: 400px;
            background-color: pink;
        }

    <div class="fa">
        <div class="son"></div>
    </div>

 

二、inline-block 的间隙

div*4 中间会有间隔，img也会有间隔

        div {
            width: 200px;
            height: 200px;
            border: 1px solid;
            display: inline-block;
        }

    <div></div>   /*  就是这个换行符造成的间隙*/
    <div></div>
    <div></div>
    <div></div>

解决 inline-block 的间隙：

1、写成一排 （不好看）

    <div></div><div></div><div></div>

2、设置margin 外边距 （有的浏览器是5px，8px，所以不好控制）

3、将父元素的font-size设置为0，将子元素重新设置font-size

4、设置浮动（父元素有剩余空间，浮动的元素彼此相邻）

float：left；