Wartość outside jest domyślną wartością właściwości list-style-position.
Domyślnie wyróżnik listy HTML znajduje się na zewnątrz obszaru elementu HTML względem początkowej krawędzi liniowej elementu HTML.
list-style-position:outside;
- pierwszy przedmiot listy HTML
- drugi przedmiot listy HTML
- trzeci przedmiot listy HTML
- czwarty przedmiot listy HTML
- piąty przedmiot listy HTML
Wyróżnik każdego przykładowego elementu "li" znajduje się na zewnątrz obszaru każdego przykładowego elementu "li".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
ul > li {
margin-bottom:1px;
padding:0.5em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<ul>
<li>pierwszy przedmiot listy HTML</li>
<li>drugi przedmiot listy HTML</li>
<li>trzeci przedmiot listy HTML</li>
<li>czwarty przedmiot listy HTML</li>
<li>piąty przedmiot listy HTML</li>
</ul>
</body>
</html>
Za pomocą wartości inside właściwości list-style-position możemy sprawić, że wyróżnik interesującej nas listy HTML znajdzie się wewnątrz obszaru zawartości elementu HTML względem początkowej krawędzi liniowej elementu HTML.
list-style-position:inside;
- pierwszy przedmiot listy HTML
- drugi przedmiot listy HTML
- trzeci przedmiot listy HTML
- czwarty przedmiot listy HTML
- piąty przedmiot listy HTML
Wyróżnik każdego przykładowego elementu "li" znajduje się wewnątrz obszaru zawartości każdego przykładowego elementu "li", ponieważ do przykładowego elementu "ul" została dodana właściwość "list-style-position" wraz z wartością "inside".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
ul {
list-style-position:inside;
}
ul > li {
margin-bottom:1px;
padding:0.5em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<ul>
<li>pierwszy przedmiot listy HTML</li>
<li>drugi przedmiot listy HTML</li>
<li>trzeci przedmiot listy HTML</li>
<li>czwarty przedmiot listy HTML</li>
<li>piąty przedmiot listy HTML</li>
</ul>
</body>
</html>
