StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem is that there are some elements that need margins and/or padding to display properly, and people forget to set them back. Also, for many elements, you are going to be setting your own styles, overriding the reset, so the reset is redundant; you should instead just set the styles the way you want them.</p> <p>One problem I see a lot is with lists. If you blindly apply a reset, the bullets for the list will appear <em>outside</em> of the containing element, which always bothers me:</p> <pre> +--------------------+ | Some paragraph, | | with text. | | | *| One | *| Two | *| Three | +--------------------+ </pre> <p>Perhaps some designers are deliberately doing this, but I think a lot of the time I see this, it's because someone has blindly applied a reset and not thought about what it would do to the indentation of list items. If you look for this, you will see it all over the place; and pretty much invariably, the site you see it on uses a CSS reset. For more information on how to format lists correctly, see <a href="https://developer.mozilla.org/en/Consistent_List_Indentation" rel="noreferrer">Consistent List Indentation on the Mozilla Developer Center</a>.</p> <p>Another problem is that after doing a reset, there are sometimes obscure elements that people don't remember to apply margins back to. For instance, the <code><dl></code> element; it's default style isn't great, but it at least lets you distinguish between the <code><dt></code> and <code><dd></code> elements within them. If you apply a reset, you lose that and wind up with everything crammed together with no distinction. Stack Overflow's reset does this, for instance, making <code><dl></code> elements pretty much useless:</p> <dl> <dt>Term</dt> <dd>Definition</dd> <dt>Term</dt> <dd>Definition</dd> </dl> <p><br> Stack Overflow's reset also lacks any top or bottom margins on the <code><dl></code> element, and only a bottom margin to <code><p></code>; so I had to add an extra <code><br></code> in order to prevent the above <code><dl></code> from running up against this paragraph.</p> <p>If you do use a reset, be very careful to make sure that <em>all</em> HTML elements do display in a sensible way. And remove the parts of your reset that are overridden by later rules that you add; there's no real reason to reset <code><b></code> and <code><i></code>, and then later apply <code>font-weight</code> and <code>font-style</code> to them, and if you reset a margin to <code>0</code> and then set it to <code>2 em</code>, then why not remove the reset to <code>0</code>?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload