Member Avatar for sheara

Hi,

I have a basic unordered list in my site map, with a few sub-indentations:

<ul>


<li>item1</li>
<li>item2</li>
<li>item3</li>
<ul>
<li>sub-itemA</li>
</ul>
<li>item4</li>
<li>item5</li>


</ul>

My problem is that I have a space/break in between sub-item A and regular line item 4. I can't seem to close the space.

My css is simple:

#site-map li {margin-bottom: 0;margin-top: 0 }

What am I missing?

Any help is much appreciated! Thanks!

Edited by happygeek because: fixed formatting
  • 6 Contributors
  • 5 Replies
  • 104 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by wickedsunny

Dani AI

Generated

Brief diagnosis: the gap comes from two things — the nested list is placed outside its parent <li> in the markup, and browser default styles (margins/padding) on ul/li make that malformed structure render with a visible gap. already pointed to the proper nesting; and were right to flag margins/padding; ’s reset idea is on the right track. A small clarification for : malformed nesting does not by itself trigger quirks mode — that is controlled by the page DOCTYPE — but invalid markup will cause browsers to reflow the DOM and produce unexpected spacing.

Practical checklist to fix this reliably:

  • Ensure the child <ul> is inside the parent <li> (the child list must live between the start and end tags of the parent list item).
  • Reset the user-agent margins/padding for the sitemap container, then add a controlled left padding for indentation rather than relying on defaults.
  • Validate the HTML and include a standards DOCTYPE so browsers use the standard rendering mode.

Suggested CSS to apply only to the sitemap (keeps changes scoped and avoids affecting other lists):

#site-map ul,
#site-map li {
  margin: 0;
  padding: 0;
}

#site-map li > ul {
  padding-left: 1.25em; /* controlled indent for nested lists */
}

If a gap still appears, inspect the parsed DOM in browser devtools — browsers may have auto-inserted tags where nesting was invalid. Also check computed styles for top/bottom margins on nearby elements (margin collapse can make spacing look larger); adding a small padding or border to the parent li or setting overflow: auto on it prevents collapse. For validation and details about DOCTYPE/quirks, use the W3C validator and MDN resources (for example, the MDN "Quirks mode" and HTML element docs).

Recommended Answers

All 5 Replies

Member Avatar for Member #360561

Hi,

I have a basic unordered list in my site map, with a few sub-indentations:

<ul>
<li>sub-itemA</li>
</ul>

My problem is that I have a space/break in between sub-item A and regular line item 4. I can't seem to close the space.

My css is simple:

#site-map li {margin-bottom: 0;margin-top: 0 }

What am I missing?

I think you should take a look at the margins defined for <ul> as well as <li>.

Member Avatar for MKala

therefore the padding value might be something other than 0

Member Avatar for vishwebdesign

<ul>
<li>item1</li>
<li>item2</li>
<li>item3
<ul>
<li>sub-itemA</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>

This is the rightway of indenting your list. Whenever you have a child-level of a list element, place the child list inside the parent list item.

Member Avatar for MidiMagic

A ul tag cannot be the direct child of another ul tag. The browser goes into quirks mode if it finds this.

Member Avatar for wickedsunny

why dont u use this style in the css it will work
ul{margin:0;}
li{margin:0;}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.