line-height 对于 inline元素[包含inline-block]的意义

首先是inline元素,就拿普通文本来讲

标题line-height 先简称lh吧,height简称h

lh表现为文本的字号加上上半间距加下半间距

<style>
			.box{
				line-height: 200px;
				background-color: salmon;
					
					/* height: 300px; */
			}
		
		</style>
	</head>
	<body>
		<div class="box">
			CSS真难
		</div>
	</body>

上面红框的高度为上半间距,下面的为下半间距

上面红框的高度为上半间距,下面的为下半间距

块级父元素被内容撑开,所以给未设置高度的块级元素内部的内联元素设置lh相当于设置了块级元素 的高度

本质上块级元素和lh是没有关系的

在对文本进行排版,不设置p里面的h,而是只是设置lh,发现文字正好居中显示,距离很到位,效果如下文字间距相等

猜你喜欢

转载自blog.csdn.net/qq_26239917/article/details/88378979