026_CSS内边距

1. 元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。

2. CSS内边距属性

3. 所有内边距都不允许使用负值。

4. 上内边距

4.1. padding-top属性设置元素的上内边距(空间)。

4.2. 行内元素上内边距不会影响行高计算。从视觉上看可能会延伸到其他行, 有可能还会与其他内容重叠。

4.3. 默认值

4.4. 可能的值

5. 右内边距

5.1. padding-right属性设置元素右内边距(空白)。

5.2. 行内元素右内边距仅在元素所生成的第一个行内框的右边出现。

5.3. 默认值

5.4. 可能的值

6. 下内边距

6.1. padding-bottom属性设置元素的下内边距(底部空白)。

6.2. 行内元素下内边距不会影响行高计算。从视觉上看可能会延伸到其他行, 有可能还会与其他内容重叠。

6.3. 默认值

6.4. 可能的值

7. 左内边距

7.1. padding-left属性设置元素左内边距(空白)。

7.2. 行内元素左内边距仅在元素所生成的第一个行内框的左边出现。

7.3. 默认值

7.4. 可能的值

8. 内边距

8.1. padding简写属性在一个声明中设置所有内边距属性。

8.2. 您还可以按照上、右、下、左的顺序分别设置各边的内边距,使用空格进行分割, 各边均可以使用不同的单位或百分比值:

h1 {padding: 10px 0.25em 2pt 20%;
}

8.3. 默认值

8.4. 可能的值

8.5. 值复制

8.5.1. 我们可以不用同时设置4个单边的内边距值, 只设置1个、2个、3个都是没有问题的, CSS会根据设置的内边距值进行值复制

h1 {padding: 10px;
}
h2 {padding: 10px 10%;
}
h3 {padding: 10px 10% 10pt;
}

8.5.2. 如何值复制:

如果缺少左内边距的值, 则使用右内边距的值。
如果缺少下内边距的值, 则使用上内边距的值。
如果缺少右内边距的值, 则使用上内边距的值。

8.5.3. 下图提供了更直观的方法来了解这一点:

9. 实例

9.1. 代码

<!DOCTYPE html>
<html><head><title>CSS内边距</title><meta charset="utf-8" /><style type="text/css">* {margin: 0; padding: 0;}p {width: 560px;}.p1 {background-color: pink;padding-top: 30px;padding-right: 25em;padding-bottom: 50pt;padding-left: 20%;}.p2  {background-color: blue; padding: 30px;}.p3 {background-color: red; padding: 30px 80px;}.p4 {background-color: green; padding: 30px 80px 130px;}</style></head><body><p class="p1">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p><p class="p2">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p><p class="p3">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p><p class="p4">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p></body>
</html>

9.2. 效果图

10. 内边距的百分比数值

10.1. 内边距百分数值是相对于其父元素的width计算的, 这一点与外边距一样。所以, 如果父元素的width改变, 它们也会改变。

10.2. 上下内边距与左右内边距一致, 即上下内边距的百分数会相对于父元素宽度设置, 而不是相对于高度。

10.3. 例子

10.3.1. 代码

<!DOCTYPE html>
<html><head><title>CSS内边距百分比</title><meta charset="utf-8" /><style type="text/css">* {margin: 0; padding: 0;}div {width: 800px; height: 500px;}p {padding: 10%; background-color: pink; width: 600px;}</style></head><body><div><p>上下内边距与左右内边距一致, 即上下内边距的百分数会相对于父元素宽度设置, 而不是相对于高度。</p></div></body>
</html>

10.3.2. 效果图

026_CSS内边距相关推荐

CSS之布局（盒子模型--内边距）
盒子模型--内边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
iOS 设置UILabel 的内边距
iOS 设置UILabel 的内边距 - (void)drawTextInRect:(CGRect)rect {UIEdgeInsets insets = {0, 5, 0, 5};[super dr ...
css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
css控制边界与边框示例(内边距、外边距使用方法)
这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比元件下端边线的空隙 p ...
【温故知新】CSS学习笔记（盒子内边距介绍）
CSS盒子内边距这一节我们开始介绍内边距(Padding). 内边距(Padding)属性用于设置内边距,内边距是指边框与显示内容之间的距离. [例子] 默认情况下边框和内容紧挨着的: 这里我们设置 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
CSS基础(part11)--盒子模型之内边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型内边距(padding) 属性设置内盒尺寸计算 padding什么时候不影响盒子大小盒子模型内边距(padding) pa ...
UITableView从storyBoard加载UITableViewCell的细节以及布局内边距问题
UITableView从storyBoard加载UITableViewCell的细节以及布局内边距问题最近在UITableViewCell踩坑不少. 对于使用storyBoard加载UITableV ...

026_CSS内边距

026_CSS内边距相关推荐

最新文章

热门文章