内边距样式属性-padding

padding-top ， padding-right ， padding-left ，padding-bottom

padding-top：设置元素上内边距的宽度，该属性有多个值

注意
行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠；

简单介绍一下替换和不可替换元素
从元素本身的特点来讲，可以分为替换和不可替换元素。

替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据 < img> 标签的 src 属性的值来读取图片信息并显示出来，而如果查看 HTML 代码，则看不到图片的实际内容；又例如根据 < input> 标签的 type 属性来决定是显示输入框，还是单选按钮等。
HTML 中的 < img> 、< input>、< textarea> 、< select> 、< object> 都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：

	<img src=”cat.jpg” /><input type="submit" name="submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
不可替换元素
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：< p>段落的内容< /p>
段落 < p> 是一个不可替换元素，文字「段落的内容」全被显示。

下面例子，在没有设置padding之前，先写如下代码，且效果如下


在没有设置padding之前，整个div区是302x302（加边框为了方便说明，边框也算长宽），下边看设置padding之后


设置padding之后，div区变化为302x352，我们可以看到padding会改变整个div的大小
padding-right ， padding-left ，padding-bottom与padding-top类似，下边看一个代码


此处div区大小变为402x402
padding-right：设置元素右内边距的宽度， 该属性有多个值

注意
行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现。

padding-bottom：设置元素下内边距的宽度， 该属性有多个值

注意
行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠；
padding-left：设置元素左内边距的宽度， 该属性有多个值

注意
行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现

padding

在一个声明中设置元素所有内边距的宽度，或者设置各边上内边距的宽度， 该属性有多个值：

注意
1，padding属性可以有 1 到 4 个值：
,2，*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值，方便后面设置
3，行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距；
看如下代码


padding 会改变div的大小，设置之后将变为402x402

padding 会改变div的大小，上篇博客中提到的margin不会改变元素大小，但是对行内元素而言，单独的设置margin-top和margin-bottom是不起作用的，只有设置display：inline-block属性，具有了块级元素的特性之后，单独设置margin-top和margin-bottom才会见效果，如下


对行内元素而言，单独的设置margin-top和margin-bottom是不起作用的


设置display：inline-block属性，具有了块级元素的特性之后，单独设置margin-top和margin-bottom才会见效果