The size of the detailed box model depends on its padding, margin and border values

Time:2021-6-1

The box model specifies the values of width and height, padding of inner margin, border of border and margin of outer margin. The blank inside the border is padding, and the blank outside the border is margin. As shown below, the width of the box model element box = the width of the content area + 2 (inner margin + outer margin + border), that is, the width of the element in this example is 170px. It should be noted that in CSS, width and height refer to the width and height of the content area. Increasing the inner margin, border, and outer margin does not affect the size of the content area, but increases the overall size of the element box( When browsing, remember to open the console F12 and click the corresponding element to view it.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    The size of the < title > box model depends on its padding, margin and border values
    <style type="text/css">
        div{
        padding: 10px;/* Inner margin*/
        margin: 20px;/* Outer margin*/
        margin: 10px 20px 30px 40px;/* Top 10px right 20px bottom 30px left 40px*/
        margin: 10px 20px;/* Up, down, left and right*/
        margin: 10px 20px ;/* Up and down are different, left and right are the same*/
        margin: 10px 20px 30px;/* Outer margin*/
        border: 5px solid red;/* Borders*/
        width: 100px;/* Content area width 100*/
        height: 100px;/* Content area height 100*/
    }
    /*Box size = 2 (inner margin + border + outer margin) * // * the div size*/
    </style>
</head>
<body>
    No matter how many books you read, you can't learn the script completely. You should practice more</ div>
</body>
</html>

Whether margin or padding, they are arranged clockwise, and the values are defined from top right to bottom left; Like this margin:10px 10px 10px 10px means that the outer margin of 10px is increased up, down, left and right of the box; marigin:10px   10px; Top, bottom, left and right outer margin 10px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    < title > margin the so-called bug is overlapping, how to solve it
    <style type="text/css">
    .box1,.box2{
        width: 200px;
        height: 200px;
        margin: 10px 20px;
        background-color: red;
    }
    </style>
</head>
<body>
    There is no operability in the < div class = "box1" > function description < / div >
    The software must be usable before it can be reused</ div>
</body>
</html>

According to normal thinking, the upper and lower spacing of the two boxes in the above code should be 20px, but actually we only have 10px when we view it on the console. The other 10px is obviously overlapped. If we adjust the margin value of the two boxes, we will find that the maximum value of the upper and lower spacing is 20px (the maximum value of the margin level element); Solution: 1.float2 change the element structure display:inline-block In addition, if margin nesting relationship, that is, parent-child relationship, you will find that they are overlapped and there is no gap, then how to solve these problems brought by margin? The solution: the box has no cover. Find a way to fill the content for the two ends. You can use border, padding overflow:hidden ; The box model is very important for the layout of our website, which is conducive to the accurate positioning of the website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    < title > methods to solve the bugs caused by margin
    <style type="text/css">
    /* .box1,.box2{
        width: 200px;
        height: 200px;
        background-color: red;
    } */
    /* .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 20px 10px;
    }
    .box3{
        margin: 20px 10px;
    }
    .box4{
        margin: 10px 20px;
    } */

    /*The solution to the problems caused by box model leveling: 1 display:inline-block 3. Write a maximum value directly, and take the margin of the maximum value at the same level*/
    div{
        /* float: left; */
        display: inline-block;
        width: 1200px;
    }
   .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 80px 10px;
    }

    /*The solution to the problem caused by horizontal nesting of box model: the box has no cover. Try to fill the two ends with content. You can use border, padding overflow:hidden ; Fill text up and down*/
    p{
        width: 800px;
    }
    .box3,.box4{
        margin: 30px;
    }
    .box3{
        background-color: green;
        /*  border:1px solid  Red * // * add border to parent element*/
        padding: 10px; /* Adding padding to the parent element*/
        /*overflow: hidden;*//* add to overflow:hidden  The excess part is hidden, and the effect is to cut out all excess parts*/
    }
    .box4{
        display: block;
        background-color: greenyellow;
    }
    </style>
</head>
<body>
    There is no operability in the < div class = "box1" > function description < / div >
    The software must be usable before it can be reused</ div>
    <p class="box3">
        <!--  Simplicity does not precede complexity, but comes after complexity
        The code in the past is untested</ span>
        <!--  Either be the first or the best -- >
    </p>
</body>
</html>

So far, this article about the size of the detailed box model depends on its padding, margin, and border values. For more related padding, margin, and border values, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!