Padding Borders Outlines Margins

简介：

　　在20世纪90年代，许多网页布局是使用table，使用table最主要的原因是因为可以放text到一个盒子里，但是这是一个比较复杂的过程，现在可以使用比较简单的方法，那就是css。

元素盒子：

　　从里到外

　　content area < content box < padding box < border box < margin box

宽度和高度：

　　通常会明确定义一个元素的宽度，很少明确定义元素的高度。width和height并不能应用到inline nonreplaced elements，例如，如果你定义width和height属性到a标签，浏览器将会忽略这些声明。

下面的代码：

　　a:link {color: red; background: silver; height: 15px; width: 60px}

它的宽度和高度由内容来决定，而不是定义的宽度和高度。如果你添加属性display，值为inline-block或者block，width和height属性将会起作用。

（提示：如果没有min-width和max-width属性，则width的值就是宽度。如果width的值大于max-width的值，则使用max-width的值，如果width的值小于min-width的值，则使用min-width的值。min-width的值优先级最高）

(提示：width值为auto和100%的区别，auto是除去margin,border,padding的宽度，去占用父元素的宽度。而100%则完全是占用父元素的宽度，如果元素存在margin或者border或者padding，则元素会超过父元素的范围）

width
值	<length>|<percentage>|auto|inherit
初始化值	auto
可以应用该属性的元素	所有的元素，除了nonreplaced inline elements, table rows, row groups
继承性	no
百分比	是引用包含该块的元素的宽度

height
值	<length>|auto|inherit
初始值	auto
可以应用该属性的元素	所有的元素，除了nonreplaced inline elements, table rows, row groups
百分比	是引用包含该块的元素的高度

提示：height：100%声明元素将会是它父元素的高度。height：auto，说明元素的高度依赖于它子元素的高度。

提示：你可以通过使用box-sizing属性来改变width和height属性的计算范围。你可以使用content-box或者

border-box作为计算的范围，这篇文章使用默认的计算范围(box-sizing: content-box)

Padding:

　　在一个元素的content area之外，有一个区域叫做padding,它是在content和border之间的区域，

设置padding最简单的方法是通过属性padding.

padding
值	[<length>|<percentage>]{1,4}|inherit
初始值	没有定义对于shorthand elements
可以应用该属性的元素	所有元素
继承性	no
百分比	引用包含该块的元素的宽度
计算的值	看单个的属性(padding-top等等)
note	padding不能设置负值

如果你想所有的h2元素有1em的padding，你可以写下面的代码：

　　h2 {padding: 2em; background-color: silver}

Note: 一个元素的背景色默认扩展到padding区域，但是可以通过属性background-clip来改变背景区域。

默认元素并没有padding。

padding的属性值可以设置任何值，从ems到inches。设置padding的最简单方式是

设置一个值，这个值将会应用到四个边上。但是如果你想要在四个边上设置不同的值，那也是相当简单的，

　　h1 {padding: 10px 20px 15px 5px}

值得顺序是很重要的，遵循下面的顺序：

padding: top right bottom left（TRBL）

你也可以使用不同类型的长度值，例如：

h2 {padding: 14px 5em 0.1in 3ex;}

重复的值：

　　有时你输入的值可能有些重复，例如：

　　p {padding: 0.25em 1em 0.25em 1em}

你并不需要记录这么多个数字，你可以使用一下的代码代替

　　p {padding: 0.25em 1em}

这两个值足够代替四个值。

css定义下面的规则：

　　如果left的值没有定义，则使用right的值。

　　如果bottom的值没有定义，则使用top的值。

　　如果right的值没有定义，则使用top的值。

让我们看一个例子：你想要元素只有left padding不是0，你可以写代码：

　　h2 {padding: 0 0 0 3em;}

如果你想要p有一个空行，你可以写代码：

p {margin: 0; padding: 0.5em 0;}

单边的padding

　　如果你仅仅想要设置left padding的值，你不需要设置h2 {0 0 0 3em;}，你可以使用代码：

　　h2 {padding-left: 3em;}

padding-top, padding-right, padding-bottom, padding-left
值	<length>|<percentage>|inherit
初始值	0
可以应用该属性的值	所有元素
继承性	No
百分比	引用包含该块的元素的宽度
Note	padding不能设置负值

下面的两种代码实现相同的效果：

h1 {padding: 0 0 0 0.25in;}

h1 {padding-left: 0.25in;}

-----------------------------

h1 {padding: 0.25in 0 0;}

h1 {padding-top: 0.25in;}

------------------------------

h1 {padding: 0 0.25in;}

h1 {padding-right: 0.25in; padding-left: 0.25in;}

通常，只要你设置超过一个边的padding，最好你使用padding。但是从文档的显示角度来看，

它并不关心你使用哪种方式。

百分比和padding

　　百分比计算是根据父类元素的content area计算得来的。所以，如果父类元素的

宽度改变，则他们也会改变。例如下面的例子：

p {padding: 10%; background-color: silver;}

<div style="width: 600px">

　　<p>

　　　　this paragragh is contained within a div that has a width of 600 pixels,

　　　　so its padding will be 10% of the width of the paragraph's parent element.

　　　　Given the declared width of 600 pixels, the padding will be 60 pixels on all

　　　　sides

　　</p>

</div>

<div style="width: 300px;">

　　<p>

　　　　This paragraph is contained width a DIV with a width of 300 pixels,

　　　　so its padding will still be 10% of the width of the paragraph's parent.

　　　　There will, therefore, be half as much padding on this paragraph as that

　　　　on the first paragraph

　　</p>

</div>

考虑一下，如果你没有声明width，元素的总体宽度（包括padding）依赖于父元素的宽度。

百分比的值是相对于父元素的宽度来说的，它应用到top, bottom padding，还有left, right padding。

div p {padding-top: 10%;}

<div style="width: 500px;">

　　<p>

　　　　This is a paragragh, and its top margin is 10% the width of its parent element

　　</p>

</div>

你可以混合使用百分比值和长度值，例如：

　　h2 {padding: 0.5em 10%;}

Padding and Inline Elements

　　到目前为止，现在的讨论是针对block boxes的元素。当padding应用到inline

nonreplaced elements时，可能会有些不同。

例如：如果你设置top和bottom padding为strong元素。

　　strong {padding-top: 25px; padding-bottom: 50px;}

这种设置在文档中是允许的，但是如果你应用这种设置到inline nonreplaced element，它将不会影响到行高。当没有可见的背景，因为padding是透明的，先前的声明将没有

任何视觉效果。在inline nonreplaced elements中的padding并不会改变行高。当然，伴有background color和padding的inline nonreplaced element会有背景色

在元素的上面和下面，例如：

　　strong {padding-top: 0.5em; background-color: silver;}

demo

行高并不会改变，但是由于背景色会扩展到padding。行的背景色会重叠到它之前的行。

上面说的行为仅仅是针对inline nonreplaced elements的top和bottom边。left和right边会有一些不同，

如果你为inline nonreplaced element设置left或者right padding，他们将会可见的。

　　strong {padding-left: 25px; background: silver;}

如果一个inline nonreplaced element跨行，情形可能有点不同。例如：

　　strong {padding: 0 25px; background: silver;}

left padding应用到元素的开始，right padding应用到元素的结尾。默认情况下，padding并不会应用到每一行的left和right边。

你可以修改跨行的行为，通过使用box-decoration-break。

Padding和Replaced Elements

你可以应用padding到replaced element上，例如：你可以应用padding到image元素上，

　　img {background: silver; padding: 1em;}

不管replaced element是block-level或者inline，padding将会围绕content，背景色将会填充到

padding，你也将会看到padding将content和border分离开。

在inline nonreplaced elements中的padding并不会影响行高，但是在replaced

elements的padding中会影响行高。