dipesh joshi's Blog

CSS Box-Model

CSS Box-Model

Padding, Margin, Border

dipesh joshi's photo
dipesh joshi
·

2 min read

Table of contents

  • Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS.

  • we have know what is block element and inline element .the Artical of that I will, join here .you will check and after its more easy for you to understand this Article.

Content box:

  • The area where your content is displayed; size it using properties inline-size and size[width] and [height]

Padding box:

  • The padding sits around the content as white space; size it using [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) and related properties.

  • padding is around the content then comes border

  • we can give padding in 3 different ways

  • you give specific side padding to your box just like if you wanna give only left side you can write

    padding-left:20px;

  • you give specific 2/3/4 side padding to your box just like if you wanna give only left/right/bottom side you can write

    padding-left:20px;

    padding-top:15px;

Border box:

  • The border-box wraps the content and any padding; size it using [border](<https://developer.mozilla.org/en-US/docs/Web/CSS/border>) and related properties.

  • the border is not included in the padding

  • there is always understandable that the border takes their width. so give padding according to that

  • the border starts when padding ends

    Margin box:

    • The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using [margin](<https://developer.mozilla.org/en-US/docs/Web/CSS/margin>) and related properties.

    • when borders end then margin starts

    • borders not include margin so give margin according to that

    • we can give margin 3 ways

    • you give specific side margin to your box just like if you wanna give only left side you can write

      margin-left:20px;

    • you give specific 2/3/4 side margin to your box just like if you wanna give only left/right/bottom side you can write

      margin-left:20px;

      margin-top:15px;

<style>
        .box1{
            height: 40px;
            width: 40px;
            padding: 20px 20px;
            margin: 20px 20px;
            border: 1px solid black;
        }
        .box2{
            height: 40px;
            width: 40px;
            padding: 20px 20px;
            margin: 20px 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">content1</div>
    <div class="box2">content2</div>
</body>

  • so now understand how all of its works here i gave 2 box all good padding ,margin, border and height and width

Margin Merge

  • if you see that margin-top of both box is total 40px (20px+20px).but its actually the space between both box is only 20px.

  • so Generally its merged the margin between two box take not of that

iwritecode#HiteshChaudhary #anuragtiwari#LCOineuron