CSS边距

本电子由站长百科(www.zzbaike.com)教程组制作 CSS边距  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS外边距   本电子书整理自站长百科CSS外边距词条，查看请访问网站。    目录 CSS边距 .....................................................................................................1 CSS外边距...................................................................................................2 CSS margin 属性 .................................................................................2 值复制...................................................................................................3 单边外边距属性 ..................................................................................4 提示和注释...........................................................................................5 CSS内边距...................................................................................................6 更多电子书.................................................................................................8 Godaddy全球最大的域名注册商 全球最大的虚拟主机服务商 支持支付宝付款 主机域名优 惠不断 更多优惠码http://bbs.idcspy.com/thread-780-1-1.html 为您节省多多  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  推荐内容： 电子书下载 | 站长百科礼品兑换 CSS外边距 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的 “空白”。 设置外边距的最简单的就是使用 margin 属性，这个属性接受任何长度 单位、百分数值甚至负值。 CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性。 margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。 margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声 明在 h1 元素的各个边上设置了 1/4 英寸宽的空白： h1 {margin : 0.25in;}下面的例子为 h1 元素的四个边分别定义了不同的 外边距，所使用的长度单位是像素 (px)： h1 {margin : 10px 0px 15px 5px;}与内边距的设置相同，这些值的顺序是 从上外边距 (top) 开始围着元素顺时针旋转的： margin: top right bottom left 另外，还可以为 margin 设置一个百分比 数值： p {margin : 10%;}百分数是相对于父元素的 width 计算的。上面这个例子 为 p 元素设置的外边距是其父元素的 width 的 10%。 本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现 外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也 不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下 面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应 用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。 值复制 有时，我们会输入一些重复的值： p {margin: 0.5em 1em 0.5em 1em;}通过值复制，您可以不必重复地键入这 对数字。上面的规则与下面的规则是等价的： p {margin: 0.5em 1em;}这两个值可以取代前面 4 个值。这是如何做到的 呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下： 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。 换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从 第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个 值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最 后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距） 复制得到。 利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值， 例如： 本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* 等价于 1px 1px 1px 1px */ 这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上 外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这 种情况下，必须写作： p {margin: 20px 30px 30px 20px;}这样才能得到您想要的结果。遗憾的是， 在这种情况下，所需值的个数没有办法更少了。 再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）： p {margin: auto auto auto 20px;}同样的，这样才能得到你想要的效果。 问题在于，键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距， 请使用单边外边距属性。 单边外边距属性 您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是 可以采用以下方法： p {margin-left: 20px;}您可以使用下列任何一个属性来只设置相应上的外 边距，而不会直接影响所有其他外边距： margin-top margin-right margin-bottom margin-left 一个规则中可以使用多个这种单边属性，例如： 本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; } 当然，对于这种情况，使用 margin 可能更容易一些： p {margin: 20px 30px 30px 20px;}不论使用单边属性还是使用 margin， 得到的结果都一样。一般来说，如果希望为多个边设置外边距，使用 margin 会 更容易一些。不过，从文档显示的角度看，实际上使用哪种方法都不重要，所以 应该选择对自己来说更容易的一种方法。 提示和注释 提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。 而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px， 因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中， 那么必须对 body 的 padding 进行自定义。 本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  CSS内边距 元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。 CSS padding 属性定义元素边框与元素内容之间的空白区域。 CSS padding 属性 CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但 不允许使用负值。 例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样： h1 {padding: 10px;}您还可以按照上、右、下、左的顺序分别设置各边的 内边距，各边均可以使用不同的单位或百分比值： h1 {padding: 10px 0.25em 2ex 20%;}单边内边距属性
也通 过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top padding-right padding-bottom padding-left 您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的： h1 { padding-top: 10px; 本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } 内边距的百分比数值 前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们 也会改变。 下面这条规则把段落的内边距设置为父元素 width 的 10%： p {padding: 10%;}例如：如果一个段落的父元素是 div 元素，那么它的内 边距要根据 div 的 width 计算。

This paragragh is contained within a DIV that has a width of 200 pixels.

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽 度设置，而不是相对于高度。 本电子书由站长百科(www.zzbaike.com)教程组制作  出处：站长百科   原文地址：http://www.zzbaike.com/wiki/CSS 外边距   本电子书整理自站长百科 CSS外边距词条，查看内容请访问网站。  更多电子书 SEO 方面的知识有很多，对于新手来说，如果你不知道，不清楚这方面的知识，那么，你可 以看看这两部搜索引擎指南: SEO搜索引擎优化基础教程：http://bbs.zzbaike.com/thread-9952-1-1.html SEO搜索引擎优化高级教程：http://bbs.zzbaike.com/thread-12692-1-1.html wordpress的中文翻译文档：http://www.wordpress.la/codex.html，wordpress 开 发的相关知识都有，对WordPress开发感兴趣的博主会有一定的用处。 WordPress免费主题：http://www.wordpress.la/theme.html WordPress免费插件：http://www.wordpress.la/plugin.html WordPress主题制作电子书：http://bbs.zzbaike.com/thread-9954-1-1.html Apache2.2 中文文档电子书：http://bbs.zzbaike.com/thread-9955-1-1.html IXWeHosting 控制面板使用手册(在线版+PDF 电子书)： http://bbs.zzbaike.com/thread-9953-1-1.html 更多电子书下载：http://down.zzbaike.com/ebook/ 1. 美国主机 IXWebHosting 使用视频教程（在线观看及下载） http://bbs.zzbaike.com/thread-47008-1-1.html 2. Godaddy 主机及域名使用视频教程（在线观看及下载） http://bbs.zzbaike.com/thread-50005-1-1.html 如果您有站长类电子书，请到这里与我们分享： http://bbs.zzbaike.com/forum-69-1.html 详情见： http://bbs.zzbaike.com/thread-23156-1-1.html 站长百科感谢您下载阅读，多谢支持！ CSS外边距 CSS margin 属性 值复制 单边外边距属性 提示和注释 CSS内边距 更多电子书