<span> 标签设置内外边距问题

问题

给<span>标签设置 padding、margin 后，父元素上下无法撑开，只有左右撑开了，代码如下

<style>
    span{
        padding: 10px;
        margin: 15px;
    }
</style>

<p>
    <span>我是谁，今天很好</span>
</p>

原因

<span> 等行内元素是可以设置内边距padding和外边距border，只不过给行内元素设置 上内外边距（padding-top、margin-top） 和 下内外边距（padding-bottom、margin-bottom）后， 虽然有效果，但无法把父元素撑开，看上去就像设置不起效果。而设置左右内外边距就有效

解决

给行内元素设置上下边距，并能把父元素撑开，需要把行内元素的display设为inline-block

总结

1. span标签是一个内联元素，只能容纳文本或者其他内联元素。
2. 和其他内联元素一样，内联元素的宽度和高度就是包含的文字或图片的宽度和高度
3. 给span标签设置高height、宽width、上下内边距(padding-top/bottom)、上下外边距(margin-top/bottom)都是不起效果。
4. 给span标签设置左右内边距(padding-left/right)、左右外边距(margin-left/right)、行高(line-height)是有效的。

父元素设置最小高度，子元素百分比高度失效问题

问题

当父元素只设置最小高度min-height(无论是 % 还是 px )时，子元素高度height设置为 百分比 会无效（如果有内容，就内容高度，如果无内容，高度则为0px）

<div class="container">
    <div class="sub">2233</div>
</div>

.container{
    min-height: 300px;
}
			
.sub{
    height: 100%;
}

原因

min-height 是在 height 计算之后再应用的。

由于父元素没有设置高度，所以在计算父元素 height 时，高度默认为 auto，故由其内容决定高度。这种情况下子元素高度设置为百分比，基于父元素高度为 auto，子元素的 height 也会当作 auto 处理。例子中算出子元素高度 0，于是容器得到 height 为 0，比 min-height 小，所以最后容器应用 min-height。

解决

解决方案要根据实际应用场景进行决定，每一种都有自己的缺陷

• 第一种： 父元素设置 position: relative, 子元素设置 position：absolute

.container{
    min-height: 300px;
    position: relative;
}
			
.sub{
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="container">
    <div class="sub">2233</div>
</div>

• 第二种：给父元素套一层外壳, 给外壳元素添加 flex 布局

.box{
    display: flex;
}

.container{
    min-height: 300px;
    width: 100%;
}
			
.sub{
    height: 100%;
}

<div class="box">
    <div class="container">
        <div class="sub">2233</div>
    </div>
</div>

• 第三种： 父元素添加 display: grid

.container{
    min-height: 300px;
    width: 100%;
    display: grid;
}
			
.sub{
    height: 100%;
}

<div class="container">
    <div class="sub">2233</div>
</div>

<img> 标签底部与父元素之间出现间隙问题

问题

按照如下代码编写，会出现图片底部与父元素之间出现几像素的间隙，这并不是我们想要的效果

<div class="box">
    <img src="https://xxx.yyy.com/fff.png" >
</div>

原因

<img>标签是属于行内元素，并且是属于特殊行内元素(可替换元素)，因为它可以设置宽高，特性与内联块元素inline-block相似，width/height/padding/margin都可设置

根据元素特性，我们可以分为可替换元素和不可替换元素
可替换元素：<img>、<input>、<textarea>、<select>、<object>
不可替换元素：html大部分元素都是，例如<h1-6>、<p>、<div>、<span>、<ul>、<li>、<a>等

图片标签的底线会和父级盒子的基线对齐(即默认vertical-align: baseline)。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决

方案一：将<img>元素设置为块级元素（block）

img{
    display:block;
}

方案二：给<img>元素添加vertical-align样式

img{
    vertical-align: top|middle|bottom;
}

方案三：把<img>元素的父元素的字体设置为0

.box{
    font-size: 0px;
}