Padding problem

[deansaddigh]

Am i right in thinking padding effects what inside the box where as margin affects outside the box.

 

So i have some text in a in a box and when ever i add padding it makes the actual box bigger and doesnt pad the text, i dont understand.

 

Heres my css.

 

#main{
padding: 5px 5px 5px 20px;
margin-top: 10px;
margin-left:5px;
float:left;
width: 620px;
background-color: orange;

 

And the html

 

<div id="main">

			 <p>Search over 400 English language schools, colleges and universities and 1500 language courses in the United Kingdom.



If you want to study in Great Britain, UKstudy will answer your questions, and will help you find a school - it's a free service!



Since 1999 UKstudy.com has given free and impartial advice to international students who want to learn English in the UK. UKstudy.com will help you to choose the best course for you from over 200 British Council accredited language schools and colleges. If you choose to book a course you will pay all the fees directly to the school. You do not pay any extra for using UKstudy.com, and you do not pay any money to UKstudy.com. </p>




	</div>

 

Can anyone shed any light on it for me?

[haku]

It depends on the browser. IE deals with paddings differently than other browsers. I believe it's IE that adds the padding to the width of the box, letting the text keep the same area, and just adding some space in between the text and the box. Other browsers  shrink the area that the text takes up.

 

Your best bet is to give the contained elements (for example, the <p> tags around the text) a margin, rather than giving the container a padding. This gives cross-browser consistency, and will cause you less headaches when you start to compare your site in other browsers.

 

As a quick heads up, if you are designing in IE - stop. Design in  pretty much any other browser, and adjust after the fact for IE. It will make your life a LOT easier in the long run.

[The Little Guy]

I believe it's IE that adds the padding to the width of the box, letting the text keep the same area, and just adding some space in between the text and the box. Other browsers  shrink the area that the text takes up.

 

I think you have that backwards...

 

When I use FF/Chrome, the box expands when I add padding.

 

How I fix this, is give the div a width, then pad it.

 

you have a padding on the left/right sides 5px and 5px which equals 10px. I then subtract 10px from the width of the div...

 

#main{
padding: 5px 5px 5px 20px;
margin-top: 10px;
margin-left:5px;
float:left;
width: 610px;
background-color: orange;
}

[haku]

You could be right about me having it backwards - I don't remember which is which. But regardless, the solution you gave isn't cross browser friendly, as some browsers will make the width be the total of the width plus the padding, and others will make the width just the width, regardless of the padding. This is why it's better to give the fixed width to the container, and apply margins or paddings to the inner elements. It's never good to add side margins/paddings to anything with a fixed width, as well it's never good to add top/bottom margins/addings to anything with a fixed height.