CSS的padding用法详解_html/css_WEB-ITnose
程序员文章站
2022-05-25 16:53:02
...
CSS的padding用法详解:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。
此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域。可以单独定义上下左右某一方位的内边距。
代码实例:
实例一:
没有设置父div的内边距的时候:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。
此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域。可以单独定义上下左右某一方位的内边距。
代码实例:
实例一:
没有设置父div的内边距的时候:
蚂蚁部落
实例二:
设置了父div内边距:
蚂蚁部落
以上代码设置了父div的左内边距。
当然我们可以通过padding-right、padding-top和padding-bottom设置各自方位的外边距。虽然通过各自方位的外边属性设置外边距比较明确,但是也略显冗余,所以可以使用padding属性一次性设置多个方位的外边距。代码实例如下:
蚂蚁部落
以上代码中通过使用padding属性一次性设置了对象的四个外边距。
下面是padding属性值的作用特点:
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上、下,第二个用于左、右。
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4655
更多内容可以参阅:http://www.softwhy.com/divcss/
上一篇: PHP高端课程,php高端_PHP教程
下一篇: PHP获取图片主色调的方法介绍
推荐阅读
-
CSS vertical-align属性的用法_html/css_WEB-ITnose
-
在2015年 开发一个 Web App 必须了解的那些事_html/css_WEB-ITnose
-
独特设计!插图和手绘元素在网页设计中的使用_html/css_WEB-ITnose
-
IE下table设置高度100%却无效的情况_html/css_WEB-ITnose
-
下面代码 canvas rotate旋转 旋转的坐标点在哪,为什么不在元素的中心点?_html/css_WEB-ITnose
-
有利于SEO的div+css命名规则_html/css_WEB-ITnose
-
在没有服务器的网页之间如何实现数据的共享_html/css_WEB-ITnose
-
a标签点击跳转失效IE6、7的奇葩bug_html/css_WEB-ITnose
-
IE 8兼容:X-UA-Compatible的解释_html/css_WEB-ITnose
-
HTML5之外的语义标准(待完成)_html/css_WEB-ITnose