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.

What is Padding, Margin and Border in CSS

captured from www.w3schools.com

Yesterday I learn about the following from CSS Tutorial:

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

Related Posts Plugin for WordPress, Blogger...

Interesting Comments

Note : All Comment will be subjected to Tech At Hand Dot Net Comment Policy

Leave a Reply




Helping in Making Money Online and More