CSS BOX MODEL USING BORDER, MARGIN & PADDING

Written By:-Avinash Malhotra

Our Website:- Tech Altum

CSS BOX MODEL

CSS Box Model is a box inside HTML Elements including Padding, Margin, & Border.

CSS Box Model

The Image Below Shows a basic box model:

Suppose we have a div as shown above containing an image,

Padding is used to give space inside, 

Border is used to give particular Border,

Margin is used to give space outside.

Padding:

Padding is used in css to give space inside element. 

It is measured in pixels.

Margin:

Margin is used to give space from outside.

It is also measured in Pixels.

Border: Border is used to give particular border to an element.

There are three basic type of borders:

1. Border-style: 

            Common border-styles are:

• Solid.           Will give straight solid line                                          


• Dashed         Will give Dashed line.                                                


• Dotted          Will give dotted line.                                                  


• Double         Will give double solid line.                                          

        Without border-style, border will not be visible.

         If we use only border-style:solid,
         The element will take a solid border of black color and 3px width.

   2. Border-width:
        A border can have any width. Commonly we use border width in pixel.
            By Default, 3px is standard width of a border.

  3. Border-color:
        We can give any color to border by using border-color:
            We can use any color by name, hexadecimal color code, or rgb color code.
            By default, black is standard color for border.

We Can also give border to a particular direction; like
border-left-style:solid
border-right-style:double
border-top-color:red;
border-bottom-width:10px.


Shorthand Property For Border:
However we can use shorthand property for border; for example;

we want a solid border of 1 px and red color, we will following cose:

border-style:solid;
border-width:1px;
border-color:red;

insread of using this long code, we can write;

border:1px solid red;   all three will be include in 1 line.

Shorthand Property for Border, margin, padding:

When we use border, margin or padding, automatically all for directions grab it.
however we can customize any particular direction by using,

Border:solid;                                     For all four directions with solid border.
Border:solid double;                          Top and bottom will be solid, left-right will be double.
Border:solid dashed double none;        Top will be solid, right will be dashed, bottom will be double and                                                        left will be none

For Example, i am using only two border properties;
border-style:solid;
border-width:1px 2px 3px 4px;
we will get results as shown below;


                                          

Same shorthand properties we can use for margin and adding.

NOTE: Border, Margin and Padding will always occupy space, do remember to calculate the complete box-model before writing css.