In Depth CSS Part 1: Margins, Padding & The Box Model
In the first post of the CSS In depth series, we’ll be talking about margins, padding and the box model.
Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.
In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues.
What are margins?
Beginning developers often use margins and padding interchangeably, but there’s actually a difference between the two.
Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.