CSS的padding用法详解_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:31:421456검색
CSS的padding用法详解:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
padding属性在网页中使用非常的频繁，所以这里详细介绍一下此属性的用法。
此属性用来定义元素的内边距或者内补白，所谓的内边距就是元素中的内容与元素内侧之间的空白区域。可以单独定义上下左右某一方位的内边距。
代码实例:
实例一:
没有设置父div的内边距的时候：
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:400px; height:400px; border:1px solid red;}.children{ width:100px; height:100px; border:1px solid green;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 实例二:
设置了父div内边距：
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:400px; height:400px; border:1px solid red; padding-left:50px;}.children{ width:100px; height:100px; border:1px solid green;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 以上代码设置了父div的左内边距。
当然我们可以通过padding-right、padding-top和padding-bottom设置各自方位的外边距。虽然通过各自方位的外边属性设置外边距比较明确，但是也略显冗余，所以可以使用padding属性一次性设置多个方位的外边距。代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:400px; height:400px; border:1px solid red; padding:20px 30px 50px 50px;}.children{ width:100px; height:100px; border:1px solid green;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html> 以上代码中通过使用padding属性一次性设置了对象的四个外边距。
下面是padding属性值的作用特点:
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4655
更多内容可以参阅:http://www.softwhy.com/divcss/
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.