现在的位置: 首页 > 综合 > 正文

margin 属性 padding属性 div属性

2015年07月25日 ⁄ 综合 ⁄ 共 856字 ⁄ 字号 评论关闭

<html>
<head>
<style type="text/css">
p.margin {margin: 1cm 1cm 1cm 1cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>

</html>

margin类似一个盒子一样,保持与外部的距离

p {padding: 50px}

<div style="width: 300px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

下面这条规则把段落的内边距设置为父元素                    width                的 10%:

.divcss5-b{margin:0 8px} 

设置“divcss5-b”对象上下间距为0,左右为8px

.divcss5-d{margin-bottom:10px} 
设置“divcss5-d”对象与下方相邻间距为10px
.divcss5-e{margin-left:9px} 

设置“divcss5-e”对象与左侧方相邻间距为9px

<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm,左和右内边距是 2.5cm。
</td>
</tr>
</table>
</body>
</html>

【上篇】
【下篇】

抱歉!评论已关闭.