Search notes:

HTML elements: ul, ol and li

<ul>…</ul> is used to create an unordered, <ol>…</ol> to create an ordered list.
The individual list items within such lists are specified with <li>.
<li> is the only (default) element whose display property value is list-item.

Influence of margin-top

The following example tries to demonstrate the influence of the CSS property margin-top on the rendering of the <ul> element:
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>HTML elements ul, ol and li</title>

  <style type='text/css'>
    div { width: 20em }
  </style>

</head>
<body>

  <div>
    The following <code>&lt;ul&gt;</code> element does not have a <code>margin-top</code> style. Hence, the items of the
    list are visually seperated from their preceeding text:
  </div>
  <ul>
    <li>Foo
    <li>Bar
    <li>Baz
  </ul>

  <div>
     The following <code>&lt;ul&gt;</code> element sets the <code>margin-top</code> value to <code>0</code>, so the
     list items are shown as belonging to the preceeding text:
  </div>
  <ul style="margin-top:0">
     <li>Foo
     <li>Bar
     <li>Baz
  </ul>

</body>
</html>
Github repository about-HTML, path: /tags/ul-ol-li/margin-top.html

See also

The @list-style CSS at-rule.
HTML elements

Index