CSS-7盒模型

最新推荐文章于 2023-03-20 11:24:56 发布

薄荷叶汁

最新推荐文章于 2023-03-20 11:24:56 发布

阅读量135

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/duzishivip/article/details/103124182

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

111111

a

222222

aaa

bbb

qq ww

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            /* 内容 content 盒子内部的宽高 */
            width: 200px;
            height: 200px;
            /* border: 边框; */
            border-style:groove;
            border-width: 10px;
            border-color: aqua;
            /* padding: 填充; 盒子边框到内容的举例  上右下左（顺时针方向） */
            padding: 10px 10px 10px 10px;

            /* margin:  外边距 边框到其他盒子的距离;上右下左（顺时针方向） */
            margin: 20px 20px 20px 20px    ;
            /* 上 top 右 right 下bottom  左 left */
        }
    </style>
</head>
<body>
    <div>
        111111
    </div>
    <h1>a</h1>
    <div>
        222222
    </div>
    <p>aaa</p>
    <p>bbb</p>
    <div></div>
    <span>qq</span><span>ww</span>
    <div></div>

</body>
</html>