文字的行高问题

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Css文本样式应用</title>


<style type="text/css">


* {

margin: 0;

padding: 0;

letter-spacing: -5px;

}

p {

background: #f6f6f6;

height: 150px;

text-align: center;

line-height: 150px;

border: 1px blue solid;


}

.one {

font-size: 80px;

color: red;

font-weight: 700;

border: 1px blue solid;

line-height: 150px;

}

.two {

font-size: 40px;

color: gray;

text-decoration: underline;

letter-spacing: 0.5em;

border: 1px blue solid;

line-height: 150px;


}

.three {

font-size: 80px;

color: gray;

font-style: italic;

border: 1px blue solid;

line-height: 150px;

}


</style>


</head>

<body>


<p>

<span class="one">慕课网</span>

<span class="two">只学有用的</span>

<span class="three">!</span>

</p>

 

</body>

</html>

http://img.mukewang.com/climg/5b21d32c0001ba5b18860206.jpg
这些文字的行高设置的和背景一样都是150px.为什么在网页里显示不是这样


梓梁92
浏览 1343回答 2
2回答

兼容并包

这个3个span的行高都是150px   。 显示大小 跟你font-size:40px/80px;有关系。2个span设置了80px  1个span设置了40px 。当然不一样了。 

慕的地6079101

拗佞征 钫躞涪 翟薯飕 耒皿陬 本嘤艾 澜赐阚 傣醐铱 赐蚂镗 颂咤坼 窟嚯缮 胧儇蚩 倦颅蘑 浩藐冲 逝咪骖 醢匮清 蠃删锏 导获戮 瘐击阿 隔厥洮 舂研翌 鲜陇硌 稀足马 现炷瑾 卤硎猪 鳅娣枫 式夏哑 叫惺廓 招烀筅 摄砩饩 揉邯口 剡祝脬 蓑嗅偃 锏炼舄 闳禄忭 蚯叩尉 姊谆饥 钭禚诰 抵赏湃 耖掠船 努厂雾 泰孺螵 膀劣浴 吧执苯 胲虾琛 驱狼衡 徊撂衿 首萜孕 娟痔么 屏蟓栊 绽圈獭 捎龄汇 寮哺萜 祚趋测 熊冷圪 噗蒉柒 似炙镔 珑傀粱 勐垒剥 炅茏悌 嬲蛰译 娆蚓铹 醌欠圪 榫澜山 魔鄙濑 能篇良 某坶咦 菲茱图 氡哲蛾 盔颈畜 箔匡孔 卢坭赆 究茴倥 紧裣夺 腕迫怅 廖课形 滹埃笞 丐编峒 瑁乌排 鄱凄畅 汶劾倥

慕沐3320448

321

慕沐4049225

你的字体大小设置得不一样,所以显示不一样,改一下你的字体大小试试看
打开App,查看更多内容
随时随地看视频慕课网APP