CSS基础:解析padding与line-height属性区别

开发 前端
这里向大家描述一下CSS中padding与line-height的区别,padding是内补丁也叫内边距,也称为填充,而line-height是检索或设置对象的行高,即字体最底端与字体内部顶端之间的距离。

你对CSS中padding与line-height的区别是否了解,这里和大家分享一下,padding与line-height的区别这是CSS基础知识,对盒模型知识与布局以及相关属性不是很了解的时候,是很容易混淆与分不清楚的。

CSS基础知识:padding与line-height的区别

padding与line-height的区别这是CSS基础知识,对盒模型知识与布局以及相关属性不是很了解的时候,是很容易混淆与分不清楚的。

  其实padding是布局设置,对容器进行内边距定义。而line-height是行距设置,设置对象(如文本)的行高。

 
Padding属性 

padding是内补丁也叫内边距,也称为填充

  检索或设置对象四边的补丁边距。

  如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

  如果只提供一个,将用于全部的四条边。

  如果提供两个,***个用于上-下,第二个用于左-右。

  如果提供三个,***个用于上,第二个用于左-右,第三个用于下。

  内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
不允许负值。

line-height属性

  检索或设置对象的行高。即字体***端与字体内部顶端之间的距离。

  如行内包含多个对象,则应用***行高。此时行高不可为负值。

  也就是文本的行距。文本通常是一行或多行组成的,表示各行之间的距离。

  例如:

ExampleSourceCode

  1. <p>我爱CSS-Web标准化Div+css教程致力于Web标准在中国的应用及发展52CSS.com</p> 
  2. 或  
  3. <div>我爱CSS-Web标准化Div+css教程致力于Web标准在中国的应用及发展52CSS.com</div> 
  4. p,div{  
  5. padding-top:40px;  
  6. line-height:200%;  
  7. }  

 最终的效果如图所示

【编辑推荐】

  1. CSS padding用法属性详解
  2. 三种实用CSS清除浮动方法揭秘
  3. 专家推荐三大“***”CSS技巧!
  4. 编写***CSS代码的五个关键
  5. CSS水平居中和垂直居中多种解决方案


 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-20 15:50:03

Paddingline-height

2013-10-29 10:32:59

IECSS

2010-08-20 14:58:26

CSSpadding

2010-08-23 11:16:25

padding-lef

2010-08-23 09:16:21

CSSpadding-bot

2010-08-24 08:56:22

CSSpadding

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-20 15:56:58

padding-toppadding-lefCSS

2010-08-23 13:45:28

padding-botCSSpadding-rig

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 13:12:10

padding-rig

2010-08-25 13:33:55

CSSpadding

2010-08-23 13:21:51

padding-lefpadding-rigCSS

2010-08-30 11:34:32

csspadding

2010-08-19 11:22:19

marginpadding

2010-09-16 11:02:56

CSS padding

2010-08-23 13:40:46

CSSpadding-bot

2010-08-23 09:11:18

padding-bot

2010-08-20 16:29:01

padding-lef
点赞
收藏

51CTO技术栈公众号