当前位置：首页 > article >正文

前端学习DAY27(盒子模型内边距）

article 2024/12/27 8:38:34

内边距(padding)，指的是盒子的内容区与盒子边框之间的距离

一共有四个方向的内边距，

可以通过:

padding-top

padding-right

padding-bottom

padding-left


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
 .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
}

设置边框

 border: 10px solid #f00;
            padding-top:25px;
        }

来设置四个方向的内边距

使用padding可以同时设置四个边框的样式，规则和border-width一致

显示4个方向 padding: 20px;

上，左右，下 padding:10px 20px 10px;

顺时针上右下左 padding:10px 10px 10px 10px;

上下，左右 padding:10px 20px;

创建一个子元素box2占满box1，box2把内容区撑满了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">   
     .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
}
.box2{
        width: 100%;
        height: 100%;
        background-color: chartreuse;
    } 
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>
</html>

总结:

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距，

本盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

可见宽的高度= border-top-width : padding-top : height + padding-bottom : border-bottom-width

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">   
     .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
}
.box2{
        width: 100%;
        height: 100%;
        background-color: chartreuse;
    } 
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>
</html>

查看全文

http://www.kler.cn/a/453320.html