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><ul></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><ul></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>