W3School-CSS 外边距 (margin) 实例

最新推荐文章于 2024-06-26 09:57:32 发布

weixin_30765475

最新推荐文章于 2024-06-26 09:57:32 发布

阅读量183

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/hoey/p/5077723.html

版权

CSS 外边距 (margin) 实例

CSS 实例

CSS 背景实例
CSS 文本实例
CSS 字体(font)实例
CSS 边框(border)实例
~~CSS 外边距 (margin) 实例~~
CSS 内边距 (padding) 实例
CSS 列表实例
CSS 表格实例
轮廓（Outline）实例
CSS 尺寸 (Dimension) 实例
CSS 分类 (Classification) 实例
CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例
CSS 伪元素 (Pseudo-elements)实例

01设置文本的左外边距

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>01设置文本的左外边距</title>
        <style type="text/css">
            body{
                background-color: #D863F2;
            }
            p.leftmargin {
                margin-left: 2cm;
            }
        </style>
    </head>

    <body>
        <p class="leftmargin">我设置了左外边距。</p>
        <p>我没有设置外边距，上面那个段落好贱！</p>
    </body>

</html>

02设置文本的右外边距

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>02设置文本的右外边距</title>
        <style type="text/css">
            body{
                background-color: #D863F2;
            }
            p.rightmargin {
                margin-right: 10cm;
            }
        </style>
    </head>

    <body>
        <p class="rightmargin">我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。偶也！</p>
        <p>我没有设置外边距，上面那个段落好贱！</p>
    </body>

</html>

03设置文本的上外边距


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>03设置文本的上外边距</title>
        <style type="text/css">
            body{
                background-color: #D863F2;
            }
            p.topmargin {
                margin-top: 5cm;
            }
        </style>
    </head>

    <body>
        <p class="topmargin">我设置了上外边距偶也！</p>
        <p>我没有设置外边距，上面那个段落好贱！</p>
    </body>

</html>

04设置文本的下外边距

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>04设置文本的下外边距</title>
        <style type="text/css">
            body{
                background-color: #D863F2;
            }
            p.bottommargin {
                margin-bottom: 2cm;
            }
        </style>
    </head>

    <body>
        <p>我没有设置外边距，下面那个段落好贱！
        <p class="bottommargin">我设置了下外边距偶也！</p>
        <p>我也没有设置外边距，上面那个段落好贱！</p>
    </body>

</html>

05所有的外边距属性在一个声明中。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>05所有的外边距属性在一个声明中。</title>
        <style type="text/css">
            body{
                background-color: #D863F2;
            }
            p.margin {
                margin: 2cm 4cm 3cm 4cm;
            }
        </style>
    </head>

    <body>
        <p>我没有设置外边距，下面那个段落好贱！
        <p class="margin">我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！</p>
        <p>我也没有设置外边距，上面那个段落好贱！</p>
    </body>

</html>

CSS 外边距 (margin) 实例总结

转载于:https://www.cnblogs.com/hoey/p/5077723.html

weixin_30765475

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3School-CSS 外边距 (margin) 实例

CSS 外边距 (margin) 实例CSS 实例CSS 背景实例CSS 文本实例CSS 字体(font)实例CSS 边框(border)实例CSS 外边距 (margin) 实例CSS 内边距 (padding) 实例CSS 列表实例CSS 表格实例轮廓（Outline）实例CSS 尺寸 (Dimension) 实例CSS 分类 (Classification) 实例...
复制链接

扫一扫