CSS：盒子模型

最新推荐文章于 2024-10-02 15:35:50 发布

_卷心菜_

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量393

点赞数

分类专栏： java Web搭建文章标签： css 前端

本文链接：https://blog.csdn.net/Thumb_/article/details/121884240

版权

java Web搭建专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述
边框的设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框设置</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: lightblue;
 
            /* 边框 两种方式*/
            /* 方式一 
            border-width: 10px;
            border-color: lightcoral;
            border-style: solid; */
            /* 方式二 */
            border: 10px black solid;
            /* 内边距 */
            padding: 10px;
            /* 外边距 */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

内边距的设置：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距设置</title>
    <style>
        #d1 {
            width: 200px;
            height: 100px;
            background-color: aqua;
            
            /* 内边距设置 */
            /* 方式一 */
            /* padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 15px;
            padding-left: 20px; */
            /* 方式二 */
            /* padding: 10px;   上下左右内边距都为10px */
            /* padding: 10px 20px;  上下10px 左右20px */
            /* padding: 10px 20px 30px;  上 左右 下 */
            padding: 10px 20px 30px 40px;  /* 上 右 下 左*/
        }
        #d2 {
            width: 200px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
</body>
</html>

在这里插入图片描述
外边距的设置：
和内边距设置同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距设置</title>
    <style>
        #d1 {
            background-color: lightblue;
            width: 200px;
            height: 100px;
            margin: 50px;
        }
        #d2 {
            background-color: lightgreen;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>