我的测试人生........

CSS中margin方法

上一篇 / 下一篇  2012-06-26 22:59:10 / 个人分类:软件开发

1.缩写(顺时针:上右下左)
margin: 25px 0 25px 0;

2.完整写法
margin-top: 25px;
margin-right: 0;
margin-bottom: 25px;
margin-left: 0;

3.上边距25px,右边距5px,下边距10px,左边距为整个宽度的30%
margin: 25px 5px 10px 30%;

4.上下边距均为25px,左右边距均为0
margin: 25px 0 

5.h1 {margin: 10px}
all four margins will be 10px
所有四个方向的边际都是10像素

h1 {margin: 10px 2%}
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
上下的边际为10像素,左右边际为文档总宽度的2%

h1 {margin: 10px 2% -10px}
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
上边际为10像素,左右边际为文档总宽度的2%,下边际为-10px

h1 {margin: 10px 2% -10px auto}
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin  will be -10px, left margin will be set by the browser
上边际为10px,右边际为文档总宽度的2%,下边际为-10px,左边际则由浏览器自动设定。

<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>//margin属性有margin-left,margin-right,margin-buttom,margin-top!`

<body>
<p>This is a paragraph with no margin specified</p>
<p class="rightmargin">This is a paragraph with a specified right margin</p>
</body>

</html>


原文来自http://hi.baidu.com/cc_fan/blog/item/5d568f1e7fca201f4134179c.html

TAG:

 

评分:0

我来说两句

Open Toolbar