您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第十一课 如何设置CSS边距

 skeeter | Div+css教程 | 2010-3-21 | 180点击 | 0评论

这一课,我们将学习如何设置css边距,设置css边距主要是设置css内边距以及css外边距,css内边距是用css padding属性来设置的,css外边距是用css margin属性来设置.

css边距是在实际排版中常用的属性，好好理解，一定会受益匪浅！


css边距属性分为：内边距 和 外边距。


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


CSS内边距
元素的内边距在边框和内容区域之间。控制该区域的属性是 padding 属性。


换句话说， padding 属性定义元素边框与元素内容之间的空白区域。


padding 属性接受任何长度单位（像素、英寸、毫米或 em。）或百分比值，但不允许为负值。


如果您希望 h1 元素的各边都有 10 像素的内边距：

.k1 {padding:20px;}

<p class=”k1”>我的内边距为20px</p>


也可以通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

1. padding-top

2. padding-right

3. padding-bottom

4. padding-left


例如： h4 {

padding-top: 10px;

padding-right: 0.25em;

padding-bottom: 2ex;

padding-left: 20%;

}


您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h5 {padding: 10px 0.25em 2ex 20%;}


也许您已经看出，上面的2个例子效果是相同的！


但更为清晰的CSS结构将会使你事半功倍！


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


内边距的百分比数值


就像你已经学过的那样，内边距使用百分比值是相对于父元素的宽度


下面这把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

 <div style="width: 200px;"><p>我的内边距是父元素宽度的 10%：</p></div>


注意：上下内边距与左右内边距一样；即上下内边距也是相对于父元素宽度设置，而不是相对于高度。


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


CSS外边距


在元素边框外的空白区域便是外边距。控制该区域的属性是 margin 属性。


margin属性 接受任何长度单位（像素、英寸、毫米或 em。）、百分数值甚至负值。


下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

h1 {margin : 0.25in;}


下面的例子为 h2 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h2 {margin : 10px 0px 15px 5px;}


与内边距的设置相同，这些值的顺序是按照 上、右、下、左 的顺序来排的


同样，外边距使用百分比值是相对于父元素的宽度：

.aa {margin : 30%;}

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

<a class=”aa”>我的外边距为60px</a>

</div>


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


单边外边距属性


您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：


p {margin-left: 20px;}您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

1. margin-top

2. margin-right

3. margin-bottom

4. margin-left


为各边设置不同的外边距：

h2 { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }


当然，我们希望所有的网页设计师们写出最简洁易懂的：

p {margin: 20px 30px 30px 20px;}


提示：如果您希望任何一边无外边距，则设置0px即可。


注意:margin属性在IE中会有双倍的Bug,去除Bug的方法是把display属性设置为inline;
padding属性在FireFox里不会生效

关键字:如何设置CSS边距,css内边距,css外边距,css margin属性,css padding属性,div+css入门教程

上一篇:第十课 什么是CSS框模型下一篇:第十二课 如何设置CSS边框

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 22次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 50次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 70次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 57次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net