margin外边距

最新推荐文章于 2024-12-04 13:21:04 发布

原创最新推荐文章于 2024-12-04 13:21:04 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#margin外边距

margin外边距专栏收录该内容

1 篇文章

订阅专栏

本文通过一个具体的HTML页面示例介绍了如何使用CSS的外边距属性来调整元素的布局和外观。通过设置不同的margin值，可以实现元素间的精确间距控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height:300px;
            background-color: #cccccc;
            margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
            /*两端对齐*/
            text-align: justify;
            /*上 右 下 左
             margin: 30px 40px 50px 60px;
             上右下左都一样
             margin:20px;
             上 左右 下
             margin:20px 40px 50px;
             上下 左右
             margin:20px 40px*/

        }
        *{
            padding: 0px;
            margin: 0px;
        }
        p{
            background-color: antiquewhite;
            height: 300px;

        }
    </style>
    <title>margin外边距</title>
</head>
<body>
<div>
    笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。
    笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。
    笑的大方，走的坦荡。
</div>
    <p>笑的大方，走的坦荡</p>

</body>
</html>