CODEWITHSUNDEEP
htmlcss
JVD
JVD

Reputation: 655

defining margins and line spacing of ordered and unordered lists using css

Why does this HTML + CSS :

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
 p    { margin : 4em; }
 ul   { margin-left:  +2em; 
        margin-right: +2em;
      }
 li   { margin-left:  +2em; 
        margin-right: +2em;
      }
</style>
<title>test
</title>
<body>
<p>
para - first line
<ul>
list heading
<li> item 1
</li>
<li> item 2
</li>
list trailer
</ul>
para - last line
</p>
</body>
</html>

Basically it appears like:


        para - first line





          list heading
            &bu; item 1
            &bu; item 2
          list trailer 

para - last line

(where &bu; is my name for the list item's bullet character).

Note the enormous space between the first line of the paragraph and the "list heading" line . How can I get rid of this ?
The only applicable CSS attribute seems to be 'line-height', but that seems to have no effect .

Also, why is the last line of the paragraph indented more to the left than the first line ?

This appears to be a bug in firefox 32's CSS rendering. Should I report it as one ?

Upvotes: 0

Views: 493

Answers (2)

i alarmed alien
i alarmed alien

Reputation: 9530

I've made a jsfiddle with the code in it; I've put borders around the elements so you can see where each element is placed.

The p element has 4em margins all around it, so that forces it away from the left margin and pushes it away from the top and following elements by 4em.

The first p element is also incorrectly nested (you can't have a ul inside a p), so the browser assumes that it should have been closed before the ul starts.

The first line of the list, 'list header', is not correctly positioned as text is not allowed directly inside the <ul> element -- it needs to either be inside an <li> (a list item), or outside the <ul> element.

The last line ('para - last line') is directly inside the body element, and so does not have the 4em margins that are applied to the other p element.

If you want to get rid of the massive gap, change the css for the p element to remove the 4em margin -- it's that simple!

p    { margin : 1em; }

I'd advise doing some reading on the css box model so you can understand padding, margins, and how elements fill space. I'd also advise running all your code (HTML and CSS) through a validator to catch simple errors like the malformed <p> element, the 'list header' text which is incorrectly placed in a <ul> element, and the unnecessary + signs in the css.

I've rewritten your HTML and CSS to produce a more sane selection of margin and borders: see this jsfiddle for details. The basics are:

  1. Make sure your HTML is valid.
  2. Don't use massive values for margins.
  3. em is the width of the m character in the font you are using. 4em is a fairly large space.

Upvotes: 1

JVD
JVD

Reputation: 655

Thanks for the above responses, but they didn't get to root of the issue, IMHO : The HTML 5 Specification ( http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-ul-element ) says:

4.4.6 The ul element
Categories:
    Flow content.
    If the element's children include at least one li element: Palpable content.
Contexts in which this element can be used:
    Where flow content is expected.

Flow content IS expected within a <p> paragraph tag, so I interpret that as meaning I'm free to insert any flow content element within a paragraph.

Also, since I didn't end the paragraph, I would not have the expected 'margin-bottom' to have been applied, creating the huge space between the first line of the paragraph and the first name of the list.

Now, without just the 'margin-left' and 'margin-right' properties specified for 'p' :

<style type="text/css">
  p    { margin-left : 2em; margin-right:2em; }
  ul   { margin-left:  +2em; 
         margin-right: +2em;
       }
  li   { margin-left:  +2em; 
         margin-right: +2em;
       }
</style>

I get :

     para - first line

        list heading
          item 1
          item 2
        list trailer 

para - last line

I particularly wanted to specify that lists and list items should have their left indent INCREMENTED by 2em, and right indent DECREMENTED by 2em , which is why I used the +2em / -2em length values for their margin-left and margin-right attributes, which happily firefox DOES seem to honor.

But I think the bug is that firefox is applying the paragraph's margin-bottom before the list is begun , when I have NOT ended the paragraph with </p> .

The negative indent of the paragraph last line is the real killer though - any ideas how to get rid of it ?

Upvotes: 0

Related Questions