Vertical spacing around UL tag

Question

One of the unintended differences between a <div> tag and a <ol> or <ul> tag is that the list tags add 20px of padding at the top and bottom of the block to whatever is specified in the style properties.

In fact, using a <div><li></li><li></li></div> gives exactly the desired results. Although this workaround is apparently illegal- (question 2031725). I'm guessing this workaround is what the poster had in mind.

Firefox/Safari/IE share this behavior. Does this problem originate in the HTML specification? Is there another obvious work-around? This seems like an obvious flaw and I hear lots of complaints.

Answer 1

The vertical space around <ol> and <ul> tags is not part of HTML, but of browsers' default styling. If you don't like the style, change it rather than using invalid HTML.

I'd also argue against "unintended differences". <ol> and <ul> have inherent, semantic meaning (that of ordered and unordered lists, respectively) and so browsers by default style them to support that meaning. <div> has (almost) no semantic meaning at all, so is unstyled by default.