CSS Box Model

CSS Box Model is the backbone of layout. CSS Box Model includes Content, padding, border and margin of an element. IN CSS Box Model, every div or element is consider as a rectangular box. That box can have content, i.e. width & height, margin, padding and border.

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

Lets say, we have a div as shown above, containing an image,
Padding is used to give space inside, Border is visible outline of an element, and Margin is used to give space outside an element.

Box Model Properties


Content, Width and Height

Content means Width and Height of a box. Default width is auto for block and inline level elements. For block level, width auto means 100% of content space, and for inline, width is equal to content of element.

By assigning Width and Height, we are actually setting width and height of content box which is area of content available inside box.

Units for width and height are px, em, and %.

css box model
CSS Box Model for Chrome

In the example above, 838 is width, 344 is height of box. Total content box is 838*344.

But total box model is 868*374 after adding padding and border.


Apart for Width and Height, we can also use min-width, max-width, min-height and max-height.


CSS Padding

Padding is used to give space inside an element. Padding inherit background color of content. As shown in example above, padding occupy space inside.

Padding units are px, em and %.

Apart form padding, we can also set padding-top, padding-right, padding-bottom and padding-left.

css padding
CSS Padding

Css Padding Example

css padding       padding is taking place inside border.


<style>
    img{
        border:2px solid #000; 
        padding:20px;
     }
</style>
<img src="1.png" alt="..">

Padding is shorthand of padding-top, padding-right, padding-bottom, padding-left.


CSS Margin

Margin is used to give space outside an element. Margin background color is transparent. Margin value can be positive or negative.

Margin units are px, %, em and auto. margin auto is used to align a block element in middle.

css Margin
CSS Margin

How to use CSS Margin


<img src="1.png" alt="..." >
<img src="1.png" alt="..." style="margin-left:50px;"  >
		

How margin look on a webpage

margin margin

Margin is shorthand of margin-top, margin-right, margin-bottom, margin-left.

CSS Border

Css border is used to give visible outline around an element. Border comes between Margin and Padding. Border can have different styles, color and width. There are three type of border Properties:

  1. Border-Style
  2. Border-Width
  3. Border-Color

Border-style

Border-style is the most important property in all three. Without border-style, border will not work. Common border-styles are:

  • Solid.
  • Dashed.
  • Dotted.
  • Double.
  • Groove.
  • Inset.
  • None.

It is compulsory to write border style. Otherwise Border will not work.

Border Style Example

..      Image with border style solid

..      Image with border style dashed

..      Image with border style dotted

..      Image with border style double

..      Image with border style groove

..      Image with border style inset

..      Image with border style none


<img src="1.png" style="border-style:solid;" >
<img src="1.png" style="border-style:dashed;" >
<img src="1.png" style="border-style:dotted;" >
<img src="1.png" style="border-style:double;" >
<img src="1.png" style="border-style:groove;" >
<img src="1.png" style="border-style:inset;" >
<img src="1.png" style="border-style:none;" >
		

Border-width

A border can have width in px or em. Normally we use border width in pixels. Default border width is 3px and color is inherited from font color.

Border Width Example

..      Image with border solid and width 3px

..      Image with border solid and width 5px

..      Image with border solid and width 8px


<img src="1.png" style="border:solid 3px;">
<img src="1.png" style="border:solid 5px;">
<img src="1.png" style="border:solid 8px;">
		

Border color

Border can have boder color using border-color property.
We can use any color by name, hexadecimal color code, or rgb color code. Default border color is inherited from font color.

Border color

..      Image with border color red

..      Image with border color blue

..      Image with border color green


<img src="1.png" style="border-style:solid;border-color:red;" >
<img src="1.png" style="border-style:solid;border-color:blue;" >
<img src="1.png" style="border-style:solid;border-color:green" >
		or
		
<img src="1.png" style="border:solid red;" >
<img src="1.png" style="border:solid blue;" >
<img src="1.png" style="border:solid green" >
		

Border

Border property is shortcut of border-style, border-width and border-color. To give same border style, width in color in all four sides, border is used. See example



<style>
button{ width:100px; height:30px;}
.btn1{ border:solid 2px red;}
.btn2{ border:dashed 2px blue;}
.btn3{ border:double 3px green;}
</style>

<button class="btn1">Button 1</button>    		
<button class="btn2">Button 2</button>    		
<button class="btn3">Button 3</button>    		
		

Border Shortcut

Long property shortcut
border-style:solid;
border-width:2px;
border-color:red
border:solid 2px red
border-style:solid;
border-width:4px;
border-top-color:red;
border-right-color:blue;
border-bottom-color:red;
border-left-color:blue
border:solid 2px;
border-color:red blue
border-style:solid;
border-width:2px;
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:yellow
border:solid 2px;
border-color:red blue green yellow

Margin and Padding Shortcuts

Long property shortcut
margin-top:40px;
margin-right:30px
margin-bottom:20px
margin-left:10px
margin: 40px 30px 20px 10px
margin-top:40px;
margin-right:20px
margin-bottom:40px
margin-left:20px
margin:40px 20px
padding-top:50px;
padding-right:40px
padding-bottom:30px
padding-left:20px
padding: 50px 40px 30px 20px
padding-top:40px;
padding-right:20px
padding-bottom:40px
padding-left:20px
padding:40px 20px

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