Total Page Views :- webs counters

CSS Box Model

CSS Box Model includes margin, border and padding of an element. IN CSS Box Model, every div or container is consider as a box. That box can have width, margin, padding and content.

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.


CSS Padding

css padding
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 Example


<img src="1.png" style="border:solid; padding:20px;"  >
		

Padding on webpage

css margin       padding is taking place inside border.

CSS Margin

css Margin
CSS Margin

Margin is used to give space from outside. Margin background color is transparent.

CSS Margin Use


<img src="1.png" style="margin-right:20px;"  >
		

How margin look on a webpage

margin       margin is taking place outside image.

CSS Border

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

Common border-styles are:

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

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

How to write on a webpage


<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;" >
		

How border-style look on a webpage

..      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


Border-width

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

How to write on a webpage


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

To write more than one property of border, we can also write border short-cut:


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

How border-width look on a webpage

..      Image with border width 3px

..      Image with border width 5px

..      Image with border width 8px

Border-color:

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

How to write on a webpage


<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" >
		

How border-color look on a webpage

..      Image with border color red

..      Image with border color blue

..      Image with border color green

Border Shortcuts

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

<style>
img{ border-style:solid; border-width:1px 2px 3px 4px}
</style>		
		
..      

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