html + css常见注意事项

1.行内元素、行内块元素之间的空白

对于span、input等行内及行内块元素，多个元素可以在同一行呈现，但有时会在不同的元素之间产生空白间隙，主要原因是不同的元素之间存在换行，被识别成了空格，可以通过删除换行（不推荐）、父元素设置字体大小为0（推荐，子元素需单独设置fontSize，否则文字内容不可见）

<div>
    <span>123</span>
    <span>234</span>
</div>

// 解决方法1
<div>
    <span>123</span><span>234</span>
</div>

// 解决方法2
<div style="font-size: 0;">
    <span style="font-size: 16px;">123</span>
    <span style="font-size: 16px;">234</span>
</div>

2.行内块的幽灵空白问题

行内块元素的底部存在空白，如下图所示img的下方存在一条空白的缝隙，该缝隙是由行内块元素与文字基线对齐产生的，而基线并不在文字的最底部

 <div>
    <img src="./src/assets/th.jpg"/>g
 </div>


// 解决方法1
img {
    vertical-align: bottom; // top middle都生效，除了默认的baseline
}

// 解决方法2
div {
    font-size: 0; // 此时需要将文字用额外的元素单独包裹，并给该元素单独设置font-size
}

// 解决方法3
img {
    display: block; // 布局产生影响
}

3.margin塌陷问题

margin的塌陷主要存在于以下两种场景：

1. 父元素的第一个子元素添加margin-top，那么会产生父元素夺走了子元素margin-top的效果
2. 父元素的最后一个子元素添加margin-bottom，那么会产生父元素夺走了子元素margin-bottom的效果

.parent {
    .child1 {
        height: 100px;
        width: 100px;
        margin-top: 20px; // margin塌陷
        background: red;
    }
    .child2 {
        height: 100px;
        width: 100px;
        margin-bottom: 20px; // margin塌陷
        background: blue;
    }

}

<span>顶部测试文字</span>
<div class='parent'>
    <div class='child1'></div>
    <div class='child12'></div>
</div>
<span>底部测试文字</span>

解决方法：

1. 父元素添加不为0的边框border
2. 父元素添加不为0的内边距padding
3. 父元素设置css样式overflow: hidden

4.行内元素的上下padding

对于行内元素如span的上下padding设置会产生遮挡的效果，如下图所示，设置了上下padding的span遮挡了上下方的div，类似于不占位置的效果，而左右的padding显示正常

span {
    background: orange;
    padding-left: 20px;
    padding: 20px;
    border: 1px solid black;
}        
div {
    height: 200px;
    width: 500px;
    background: red;
}


<div></div>
<span>span left</span><span>span center</span><span>span right</span>
<div></div>