您的位置：首页 > Web前端 > CSS

CSS-外边框与内边框属性

2017-12-05 21:24 537 查看
1.1 上边距 margin-top

上边距也叫顶端边距，使用上边距可以设置元素的上边界，可以使用长度值或百分比。

语法：

margin-top:边距值

说明：

margin-top取值范围包括如下：

长度值相当于设置顶端的绝对边框值，包括数字和单位；

百分比是设置相对于上级元素的宽度的百分比，允许使用负值；

auto是自动取边距值，即元素的默认值。

举例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>顶端边距</title>
<style type ="text/css">
<!--
img {
margin-top: 30pt;
}
-->
</style>
</head>
<body>
<img src="images/biao.jpg" width="119" height ="188" align="left">
红色的花朵让我想到火,白色的花朵让我想到雪.
火与雪是不相容的：但是这两盆花却融洽地开在一起,宛如火上有雪,
或雪上有火.我故而乐之,小小的心灵里觉得十分奇妙,十分有趣
</body>
</html>

1.2其他边距margin-bottom、margin-left、margin-right

底边边距用于设置元素下方的边距值；左侧边距和右侧边距则分别用于设置元素左右两侧的边距值。其语法和用法与顶端边距类似，下面用一个例子来看底边边距、左侧边距、和右侧边距的效果。

举例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>顶他边距</title>
<style type ="text/css">
<!--
img {
margin-top: 20pt;
margin-right: 50px;
margin-bottom :10px;
margin-left :50px;
}
-->
</style>
</head>
<body>
<img src="images/biao.jpg" width="119" height ="188" align="left">
红色的花朵让我想到火,白色的花朵让我想到雪.
火与雪是不相容的：但是这两盆花却融洽地开在一起,宛如火上有雪,
或雪上有火.我故而乐之,小小的心灵里觉得十分奇妙,十分有趣
</body>
</html>

1.3外边距复合属性 margin

外边距的复合属性为对4个边距设置的略写。

语法：

margin:长度值|百分比|auto

说明：

margin的值可以取1到4个，如果只设置1个值，则应用于所有的4个边界；如果设置2个或3个值，则省略的值与对边相等；如果设置4个值，则按照上、下、左、右的顺序分别对应起边距。

举例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<title>顶他边距</title>
<style type ="text/css">
<!--
img {
margin:10px 30px 10px 20px;
}
-->
</style>
</head>
<body>
<img src="images/biao.jpg" width="119" height ="188" align="left">
红色的花朵让我想到火,白色的花朵让我想到雪.
火与雪是不相容的：但是这两盆花却融洽地开在一起,宛如火上有雪,
或雪上有火.我故而乐之,小小的心灵里觉得十分奇妙,十分有趣
</body>
</html>

1.4 顶端内边距 padding-top

顶端内边距属性padding-tip用于设置上边框和选择内容之间的间隔。

语法：

padding-top:间隔符

1.5 其他内边距 padding-bottom、padding-right、padding-left

其他内边距属性分别用于设置低端、左、右两侧的间隔，其语法和用法与顶端内边距类似。

1.6 内边距符合属性 padding

语法：

padding：长度值|百分比
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航