图片 3

line-height和height的区别,line-heightheight

line-height和height的区别,line-heightheight

line-height 是指每行的高度, 假如定义p标签的行高为line-heigth:20px;
文字在浏览器中显示为一行时,这个p标签的高度会为20px,如果为两行,则p标签的高度为40px; line-height是20px不变,
只是height变了

 

但是,我们定义p的样式为height:20px,那么这个元素的高度并不会因为内容的多少而改变,如果显示为2行,文字的总高度超出了,这个p标签的高也不会随着文本而改变。

 

 

技巧一 
行高等于元素高,可将文本内容垂直居中

p{ height: 50px; line-height: 50px; background: yellowgreen; width:100px; }
<p>测试文本</p>
  • 1
  • 2

  • 1
  • 2

图片 1

行高尽量不要大于元素高。如果行高大于元素高,多个相同的结构下很容易出现错位 
图片 2

line-height和height的区别,line-heightheight。技巧二 
设置高度和浏览器一样高 
效果: 
图片 3

你设置高为100%,再设置边是不起作用的。需要把html和body一起设置为100%,完整代码如下

html,body{ height: 100%; overflow: hidden; }
body{ border:10px solid red;}
  • 1
  • 2

  • 1
  • 2

写在< style >中就可以了。

line-height 是指每行的高度,假如定义p标签的行高为line-heigth:20px;
文字在浏览器中显示为一行时,这个…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章