php内外边距,CSS 内边距

CSS 内边距

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

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

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

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：

h1 {

padding-top: 10px;

padding-right: 0.25em;

padding-bottom: 2ex;

padding-left: 20%;

}

内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

This paragragh is contained within a DIV that has a width of 200 pixels.

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

CSS 内边距实例

所有内边距属性在一个声明中

本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。

设置下内边距 1

本例演示如何使用厘米值来设置单元格的下内边距。

设置下内边距 2

本例演示如何使用百分比值来设置单元格的下内边距。

设置左内边距 1

本例演示如何使用厘米值来设置单元格的左内边距。

设置左内边距 2

本例演示如何使用百分比值来设置单元格的左内边距。

设置右内边距 1

本例演示如何使用厘米值来设置单元格的右内边距。

设置右内边距 2

本例演示如何使用百分比值来设置单元格的右内边距。

设置上内边距 1

本例演示如何使用厘米值来设置单元格的上内边距。

设置上内边距 2

本例演示如何使用百分比值来设置单元格的上内边距。

CSS 内边距属性

属性

描述

简写属性。作用是在一个声明中设置元素的所内边距属性。

php内外边距,CSS 内边距相关推荐

html怎么设置左侧内边距,CSS 内边距(Padding)
CSS 内边距(Padding) CSS 内边距(Padding)属性定义元素边框与元素内容之间的空间.有时候也称CSS 内边距(Padding)为填充(Padding). 内边距(Padding) ...
Css内边距与外边距
Css内边距与外边距 Css内边距 Css外边距margin Css外边距margin 设置外边距最简单的方法就是margin属性.margin属性接受任何长度单位,可以是像素,英寸,毫米或em ma ...
css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
css内边距外边距和边框
关于css内边距外边距和边框的一些介绍 1.margin 外边距是指相邻同辈元素之间的距离. 相邻元素块的margin叠加显示如上图所示两个元素块的margin值都设置为50px. 2.paddi ...
CSS内边距和外边距
内边距: 边框于内容之间的距离. 外边距:边框于边框之间的距离. CSS 内边距属性属性描述 padding 简写属性.作用是在一个声明中设置元素的所内边距属性. padding-bottom 设 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
CSS 内边距 padding 属性
CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...
盒子模型（插入图片，外边距，内边距）
盒子模型(Box Model) 所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器盒子模型有元素的内容.边框(border).内边距(padding).和外边 ...
html内外边距怎么设置,css内边距怎么设置？
在前端开发中经常会使用css盒子模型,一般我们会通过css设置width(宽度),padding(内边距),margin(外边距)等属性可以调节整个盒子的大小. 下面我们来看一下设置padding(内 ...

php内外边距,CSS 内边距

php内外边距,CSS 内边距相关推荐

最新文章

热门文章