Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the relationship between margin, padding and width in different browsers?

Tags:

css

CSS width value = display width of inside?

or

CSS width value = display width of inside + CSS margin-left + CSS margin-right?

like image 803
user20228 Avatar asked Sep 22 '08 06:09

user20228


People also ask

What are the relationship of padding border and margin?

In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

Does padding affect width?

Padding and Element Width CalculationsIf an element has a specified width, any padding added to that element will add to the total width of the element. This is often an undesirable result, as it requires that an element's width be recalculated each time the padding is adjusted.

What is the difference between width and padding?

Width is the space from left to right that the element takes up on the page. Padding is the space around the content of the element (all four sides) but inside of the border. Using a larger width you would just stretch the element out further and the height would not change.

What is the difference between margin and padding in HTML?

In HTML margins work the same way in giving space away from the edge of the page. Borders simply wrap the element. A border can wrap immediately around an element, or it may look further away from an element if more padding has been applied to the element. Padding provides space around the element.


1 Answers

You have to make yourself familiar with the CSS Box Model. It explains where padding, margin and border as well as width work.

However do note that different browsers implement this differently: most notably, Internet Explorer has a box model bug (this is infamously present in IE6 -- I am not aware if this has been fixed in IE7 or IE8) that caused the infamous "quirks mode" CSS hack.

Briefly stated, Internet Explorer set their box model to include padding in computing the width, as opposed the official standard wherein width should only constitute the content.

like image 82
Jon Limjap Avatar answered Oct 15 '22 03:10

Jon Limjap