Sunday, February 6, 2011

4 rules to avoid messing up box model (strict mode)

1) Avoid Width when you are not sure of available width. Use display:block instead. Child elements of display:block can use "width:100%" to cover entire row (Make sure you also follow steps below while using width style).
2) If you must use width, ensure that the border, padding and margin for that element are set to 0px
3) Avoid margin. Margin is a box model spoiler. DO NOT USE it.
4) If you want to put space around an element (=margin), embed that element inside a div or span and set padding of the parent element.