Beispiel:CSS2 text-indent.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>text-indent</title>
<style>
main { padding: 1em 10em; }
.bookstyle { text-indent: 4em; }
.bookstyle > * { text-indent: 0; }
.datalist { padding: 0; margin: 0; }
.datalist li { padding-left: 40px; text-indent: -40px; }
.datalist li > * { text-indent: 0; }
.img-replace-technique {
width: 32px;
height: 32px;
text-indent: -9999px;
overflow: hidden;
float: left;
margin-right: 8px;
background: url(//wiki.selfhtml.org/mediawiki/images/d/d8/Iconset.png);
}
.img-replace-technique.ff { background-position: 0 -62px; }
.img-replace-technique.ie { background-position: 0 -31px; }
.img-replace-technique.ch { background-position: 0 -155px; }
</style>
</head>
<body>
<main>
<h2>Erstzeilen-Einzug mit <code>text-indent</code></h2>
<!-- 1. -->
<p class="bookstyle">Die erste Zeile erscheint eingezogen.
Jede Zeile nach dem ersten automatischen oder expliziten
Umbruch erscheint normal.
</p>
<!-- 2. -->
<ul class="datalist">
<li>
<strong>Ein Label:</strong>
gefolgt von weiterem Text der nach dem Umbruch aber
eingerückt erscheint.
</li>
<li>
<strong>Ein Label:</strong>
gefolgt von weiterem Text der nach dem Umbruch aber
eingerückt erscheint.</li>
</ul>
<!-- 3. -->
<ul class="iconmenu">
<li class="img-replace-technique ff">Firefox</li>
<li class="img-replace-technique ie">Internet Explorer</li>
<li class="img-replace-technique ch">Chrome</li>
</ul>
</main>
</body>
</html>
