CSS-外边框与内边框属性

最新推荐文章于 2024-09-27 11:28:03 发布

「已注销」

最新推荐文章于 2024-09-27 11:28:03 发布

阅读量1.2w

点赞数

分类专栏： BS学习

本文链接：https://blog.csdn.net/limeijng/article/details/78722194

版权

BS学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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：长度值|百分比