What is Padding, Margin and Border in CSS

Yesterday I am troubleshooting this blog and I am changing the layout of my header. The script for my 234 x 60 smowtion ads that appears above seems not to be in the right position. I tried to work out the CSS and it took me sometime to figure the meaning of margins, padding, border in CSS ( Cascading Style Sheets ) etc. CSS Defines on your site looks like.

Good that there are lots of CSS tutorial available in the net.

captured from www.w3schools.com

Yesterday I learn about the following from CSS Tutorial:

• Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border – A border that goes around the padding and content. The border is affected by the background color of the box
• Padding – Clears an area around the content. The padding is affected by the background color of the box
• Content – The content of the box, where text and images appear

Using the following example , let me share the information I got yesterday about CSS of my WordPress Template :

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Above code means :

Let’s do the calculation:
250px (width) – { Content Width }
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px { This is to the total width of the object that you can float either right or left.

Believe me, it took me hours to figure out how to use this CSS style in my WordPress template. I am not a web designer, but sometimes I am trying to understand things within my template which I am using for the last 4 years.

One thing I learn about CSS is that “ You need to close what you have open“ .

I am sharing this experience for my fellow blogger who is also trying to understand the concept of Margin, Padding, Border in CSS. If I don’t know this and I spend lots of time Googling this subject yesterday, there is also a great chance that if this post will be number # 1 in SERP, it could lead to a targeted visitors and additional readers and hits for this blog that would eventually turn in Make More Money Online