站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
CSS外边距
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[CSS学习教程#CSS学习教程|上一页]] | {{template:开发语言导航}}</span> <div style="clear:both;"></div> 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 <br> 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。<br> == CSS margin 属性 == 设置外边距的最简单的方法就是使用 margin 属性。<br> margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。<br> margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:<br> <nowiki> h1 {margin : 0.25in;}下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):</nowiki><br> <nowiki>h1 {margin : 10px 0px 15px 5px;}与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:</nowiki><br> <nowiki>margin: top right bottom left另外,还可以为 margin 设置一个百分比数值:</nowiki><br> <nowiki>p {margin : 10%;}百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。</nowiki><br> <nowiki>margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。</nowiki><br> == 值复制 == 有时,我们会输入一些重复的值:<br> <nowiki>p {margin: 0.5em 1em 0.5em 1em;}通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:</nowiki><br> <nowiki>p {margin: 0.5em 1em;}这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:</nowiki><br> 如果缺少左外边距的值,则使用右外边距的值。 <br> 如果缺少下外边距的值,则使用上外边距的值。 <br> 如果缺少右外边距的值,则使用上外边距的值。 <br> 换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。<br> 利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值,例如:<br> <nowiki>h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */</nowiki><br> <nowiki>h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */</nowiki><br> <nowiki>p {margin: 1px;} /* 等价于 1px 1px 1px 1px */</nowiki><br> 这种办法有一个小缺点,您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素,下外边距和右外边距设置为 30 像素。在这种情况下,必须写作:<br> <nowiki>p {margin: 20px 30px 30px 20px;}这样才能得到您想要的结果。遗憾的是,在这种情况下,所需值的个数没有办法更少了。</nowiki><br> <nowiki>再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px):</nowiki><br> <nowiki>p {margin: auto auto auto 20px;}同样的,这样才能得到你想要的效果。问题在于,键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距,请使用单边外边距属性。</nowiki><br> == 单边外边距属性 == <nowiki>您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto),而是可以采用以下方法:</nowiki><br> <nowiki>p {margin-left: 20px;}您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:</nowiki><br> <nowiki>margin-top </nowiki><br> <nowiki>margin-right </nowiki><br> <nowiki>margin-bottom </nowiki><br> <nowiki>margin-left </nowiki><br> 一个规则中可以使用多个这种单边属性,例如:<br> <nowiki>h2 {</nowiki><br> <nowiki>margin-top: 20px;</nowiki><br> <nowiki>margin-right: 30px;</nowiki><br> <nowiki>margin-bottom: 30px;</nowiki><br> <nowiki>margin-left: 20px;</nowiki><br> }<br> 当然,对于这种情况,使用 margin 可能更容易一些:<br> <nowiki>p {margin: 20px 30px 30px 20px;}不论使用单边属性还是使用 margin,得到的结果都一样。一般来说,如果希望为多个边设置外边距,使用 margin 会更容易一些。不过,从文档显示的角度看,实际上使用哪种方法都不重要,所以应该选择对自己来说更容易的一种方法。</nowiki><br> == 提示和注释 == <nowiki>提示:Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。而 Opera 不是这样。相反地,Opera 将内部填充(padding)的默认值定义为 8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于 Opera 中,那么必须对 body 的 padding 进行自定义。</nowiki><br> [[category:CSS学习教程]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:开发语言导航
(
编辑
)