Aug 28

CSS “width” gotcha

I found out something interesting today.  Per the W3C, the total “width” that a block element uses is:

If ‘left’ or ‘right’ are given as ‘auto’, their computed value is 0. The following constraints must hold between the other properties:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

This made life interesting while working on a css sprite (more on that next).  I kept wondering why it bled into the next sprite….

I had thought it was the total width of the element.  Foolish me.  Now I know and……

Leave a Reply

%d bloggers like this: