10 Things You Might Not Know About Using CSS

posted by Kravimir at 7:44 PM on Dec. 30th, 2008

Categories: CSS, Beginner, Intermediate 2 comments

I started writing this just a few days after the last entry, but only finished it now. Hopefully it will be a long time before such a long gap occurs again between entries.

  1. Box Models are, in short, how the padding and borders relate to the total width and height of an element. It's getting to be less of an issue since many people have stopped supporting IE5.x/Win and make sure that IE6+ use "Standards mode". However, it is still an important issue to be aware of.
  2. Many elements have default padding and/or margins and browsers differ on their defaults for these. So it's best to always set those properties explicitly on elements like paragraphs, lists, and headers. I recommend that you read No Margin For Error and No CSS Reset.
  3. The width and height properties don't apply to inline elements.
  4. The vertical-align property only affects inline elements and aligns those elements relative to the height of the line box, not the parent element. The exception is that when it is applied to table-cells, where it acts like the old X/HTML valign attribute.
  5. text-align:center only aligns the inline content of an element, not the element itself, except when it is applied to a table-cell where it acts like the old X/HTML align attribute. "margin:0 auto" does not apply to inline elements and will only work on elements that have a set width. The exception is that "margin:0 auto" works on a <table> that doesn't have a set width, since it will shrink-wrap its contents.
  6. The top, left, right, bottom, and z-index properties don't apply to non-positioned elements. That is to say elements that don't have their position property set to a valid value other than "static", which is the default value.
  7. Floated elements will overflow the bottom of their parent if they are tall enough and there isn't something to stop them. Be careful to clear or contain them so you don't get any unpleasant surprises. IE doesn't always handle that correctly, so be aware that it often will display differently from other browsers. See Clearing and Containing Floats for more information.
  8. Collapsing Margins are a feature that can be quite confusing when you run into it, so it's best to learn how to spot them.
  9. Sometimes mysterious gaps will appear below <img>s. These explain why: That mysterious gap under images Images, Tables, and Mysterious Gaps
  10. Browsers — especially IE — have issues with percentages that add up to 100%. You see when those percentages are converted to pixels, rounding often occurs. Browsers handle that rounding in different ways, some better than others. The simplest solution is to make things add up to less than 100% when you can. Negative left or right margins perhaps in combination with relative positioning can also be used to remedy this issue.
#1 EricReese 1:57 PM on May. 24th, 2009

good list. I have missed the collapsing margins a couple of times on debugging layouts. it's useful to know

#2

I rellay needed to find this info, thank God!

Lorren 10:13 AM on Sep. 1st, 2011

I rellay needed to find this info, thank God!

Comment Form: