设置外边距的最简单的办法就是运用margin属性。margin用于设置对象标签之间间隔距离,比方2个上下排列的DIV盒子,我们就能够运用margin款式完成上下2个盒子间距。margin属性承受任何长度单位,能够是像素、英寸、毫米或em。margin能够设置为auto。更常见的做法是为外边距设置长度值。下面的声明在h1元素的各个边上设置了1/4英寸宽的空白:h1{margin:0.25in;},下面为h1元素的四个边分别定义了不同的外边距,所运用的长度单位是像素(px):
h1{margin:10px0px15px5px;}
与内边距的设置相同,这些值的次第是从上外边距(top)开端围着元素顺时针旋转的,另外,还能够为margin设置一个百分比数值:p{margin:10%;},这样p元素的外边距是其父元素的width的10%。margin的默许值是0,所以假如没有为margin声明一个值,就不会呈现外边距。但是,在实践中,阅读器对许多元素曾经提供了预定的款式,外边距也不例外。应用margin完成规划居中,根底用法:marign:0auto;即可完成对象居中,但需求一个条件,那就是该对象上级一定要设置text-align:center内容居中属性款式。有的阅读器body标签不设置text-align:center内容居中款式,其下级包含对象设置了margin:0auto也会让其规划居中,但为了兼容各大阅读器倡议对body设置一个text-align:center属性款式。
CSS单边外边距属性
你能够运用单边外边距属性为元素单边上的外边距设置值。假定您希望把p元素的左外边距设置为20px,能够采用以下办法:
p{margin-left:20px;}
您能够运用下列任何一个属性来只设置相应上的外边距,而不会直接影响一切其他外边距:margin-top、margin-right、margin-bottom、margin-left
一个规则中能够运用多个这种单边属性,例如:
h2{
margin-top:20px;
margin-right:30px;
margin-bottom:30px;
margin-left:20px;
}
Tag:
教程