css中的em单位怎么用
发表于:2025-01-20 作者:千家信息网编辑
千家信息网最后更新 2025年01月20日,小编给大家分享一下css中的em单位怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!css长度单位之em单位em是相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定
千家信息网最后更新 2025年01月20日css中的em单位怎么用
小编给大家分享一下css中的em单位怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
css长度单位之em单位
em是相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的。例:1em相当于当前的字体尺寸(font-size属性),那么2em相当于当前字体尺寸的2倍。若用于其他属性(width,height),则是相对于本身元素的font-size。可以作用在width、height、line-height、margin、padding、border等样式的设置上。
我们具体的看一个简单的示例,来了解em。
div{
font-size:40px;
width:10em;
/*400px*/
height:10em;
border:solid1pxblack;
}
p{
font-size:0.5em;
/*20px*/
width:10em;
/*200px*/
height:10em;
border:solid1pxred;
}
span{
font-size:0.5em;
width:10em;
height:10em;
border:solid1pxblue;
display:block;
}
我是父元素div
我是子元素p
我是孙元素span