<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../lib/w3.css">
<body class="w3-container">
<h2>Padded List</h2>
<p>Use any of the w3-padding classes to increase or decrease the padding of each list item:</p>
<p>4px padding:
<ul class="w3-ul w3-border" style="width:50%">
<li class="w3-padding-hor-4">Jill</li>
<li class="w3-padding-hor-4">Eve</li>
<li class="w3-padding-hor-4">Adam</li>
</ul>
<p>8px padding:</p>
<ul class="w3-ul w3-border" style="width:50%">
<li class="w3-padding-hor-8">Jill</li>
<li class="w3-padding-hor-8">Eve</li>
<li class="w3-padding-hor-8">Adam</li>
</ul>
<p>16px padding:</p>
<ul class="w3-ul w3-border" style="width:50%">
<li class="w3-padding-hor-16">Jill</li>
<li class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
<p>32px padding:</p>
<ul class="w3-ul w3-border" style="width:50%">
<li class="w3-padding-hor-32">Jill</li>
<li class="w3-padding-hor-32">Eve</li>
<li class="w3-padding-hor-32">Adam</li>
</ul>
</body>
</html>