I am new in programming and always find it is difficult to use padding and margin attributes in css. Please someone explain what is the difference between them and where to use them in what conditions??
Very simple question that I see many experienced developers still screw up at... so don't feel bad not grasping this one right away. I'll try to give you code examples here, it's often easiest to grasp if you just start playing with them and have actual working examples to see what's going on... try saving them and looking at what they do. There are two major differences: 1) padding is added to the element's width for calculating it's size. This means adding padding expands the size of the background and the border. Consider: <div style="border:1px solid #000; background:#DDD; padding:1em;">Test</div> <div style="border:1px solid #000; background:#CDE; margin:1em;">Test</div> Code (markup): First box is larger because padding goes inside the border. second one is smaller, but notice that it's pushed in -- margin is outside the border. (whether the border is visible, has width, or whatever) 2) padding is inside the border and doesn't 'collapse', while margins are outside the border and do collapse. 'collapsing' is the tricky part -- normal elements with margins that face each-other only use whichever margin is larger as space between them. Consider this example: <div style="margin-bottom:1em;">Test</div> <div style="margin-top:2em;">Test</div> Code (markup): You will find that it only makes 2em of space between the elements, the larger of the two values. that's what's meant by margin collapse. Beware that certain types of positioning and removal from flow eliminates 'collapse' and instead stacks them. Float for example: <div style="float:left; margin:0 1em; background:#DDD;">Test<div> <div style="float:left; margin:0 1em; background:#CDE;">Test<div> Code (markup): Between them you end up with 2em of padding instead of 1em, because floats 'stack' instead of 'collapse'. As a rule of thumb I try to avoid margins unless I really need them. It is often easier to pad a parent element than margin a child one as padding never collapses and you hit all the children from one call. Sometimes collapse will actually pass through a parent element to the parent's siblings, which can be really unpredictable also making margins less than desirable. At the same time I try to avoid declaring width and padding at the same time due to issues in older (and sometimes even current) browsers, so there are situations where left and right margins are the only practical option. Hope that clears it up.
Oh, you should also be aware of negative margins. This oversimplifies and it ain't quite right, but for purposes here it will have to do, cause I ain't got the time to explain it to you... - I like to think of elements as having two separate boxes -- a 'flow' box that determines how it's positioned on the page and a 'render' box that determines how it's drawn. They can be controlled separately, and the 'flow' box can be turned off completely (position:absolute does this). A negative margin 'shrinks' the flow box without changing how it's drawn or how large it's drawn. Consider the following example: <div style="float:left; width:10em; text-align:center; background:#DDD; margin-right:-5em;">Test<br>test</div> <div style="float:left; width:10em; text-align:center; background:#CDE;">Test</div> Code (markup): The second div is positioned OVER the first one halfway across -- this is because the negative margin 'shrunk' the size of the first div for flow. The second line peeking out from underneath shows that it's still being rendered as the full width despite said change. This is actually the cornerstone for most good multi-column fluid layouts... you make your center column have a floated 100% width container, leaving 'zero width' free for the columns. You then use a negative margin equal to the side columns widths to reduce them to zero width in flow... which makes them fit and hop up into place next to and over that 100% width sibling. Though that's a really advanced topic for another time.
The simplest explanation of margin and padding is that margin is pushing block element away from other elements, and padding is pushing borders of block element from inside of an element. see picture...... tip: sometimes it seems that they are doing the same thing, but it happens only when border of an element is invisible.