小白教程
所有教程
关于
Search
172.69.7.54
172.69.7.54
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS margin(外边距)”的源代码
本页内容
上一节:
CSS_轮廓(outline)属性
下一节:
CSS_padding(填充)
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS margin(外边距)}}[[Category:CSS 教程|15]] = CSS margin(外边距) = CSS margin(外边距)属性定义元素周围的空间。 == margin == margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。 margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。 == 可能的值 == {| class="table table-striped table-hover" ! 值 ! 说明 |- | auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |- | length | 定义一个固定的margin(使用像素,pt,em等) |- | % | 定义一个使用百分比的边距 |} Margin可以使用负值,重叠的内容。 == Margin - 单边外边距属性 == 在CSS中,它可以指定不同的侧面不同的边距: <sample title="" desc="" lang="html" hererun="1"> margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { background-color:yellow; } p.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } </style> </head> <body> <p>这是一个没有指定边距大小的段落。</p> <p class="margin">这是一个指定边距大小的段落。</p> </body> </html> </run> == Margin - 简写属性 == 为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。 所有边距属性的简写属性是 margin : <sample title="" desc="" lang="html" hererun="1"> margin:100px 50px; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { background-color:yellow; } p.margin { margin:100px 50px; } </style> </head> <body> <p>这是一个没有指定边距大小的段落。</p> <p class="margin">这是一个指定边距大小的段落。</p> </body> </html> </run> margin属性可以有一到四个值。 * '''margin:25px 50px 75px 100px;''' ** 上边距为25px ** 右边距为50px ** 下边距为75px ** 左边距为100px * '''margin:25px 50px 75px;''' ** 上边距为25px ** 左右边距为50px ** 下边距为75px * '''margin:25px 50px;''' ** 上下边距为25px ** 左右边距为50px * '''margin:25px;''' ** 所有的4个边距都是25px == 更多实例 == [[try.php?filename=trycss_margin top|文本的上边距设置使用厘米值]] 这个例子演示了如何设置一个使用厘米值的文本的顶部margin。 [[try.php?filename=trycss_margin bottom_percent|Set 使用百分比值设置文本的下边距]] 这个例子演示了如何设置使用百分比值的下边距,相对于包含的元素的宽度。 == 所有的CSS边距属性 == {| class="table table-striped table-hover" ! 属性 ! 描述 |- | [[pr margin|margin]] | 简写属性。在一个声明中设置所有外边距属性。 |- | [[pr margin bottom|margin-bottom]] | 设置元素的下外边距。 |- | [[pr margin left|margin-left]] | 设置元素的左外边距。 |- | [[pr margin right|margin-right]] | 设置元素的右外边距。 |- | [[pr margin top|margin-top]] | 设置元素的上外边距。 |}
返回至“
CSS margin(外边距)
”。
上一节:
CSS_轮廓(outline)属性
下一节:
CSS_padding(填充)