SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:CSS display-inline.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display: inline;</title>
<style>
p {
    background: #fdfcf3;
    border: thin solid #dfac20;
    border-radius: 0 0.2em 0.2em;
}

#beispiel1 {
    width: 11em;
    line-height: 2;
}
    
span  {
    background: #e6f2f7;;
    border: thin solid #337599;
    border-radius: 0 0.2em 0.2em;       
    }
	
#beispiel2 code {
    font-size: 1.5em;
    line-height: 3em;
    vertical-align: top;
}	

body {
    max-width: 40em;
    margin: 0 auto;
    border: thin solid;
}

</style>
</head>

<body>
<h1>Beispiele für verschiedene Eigenschaften von Elementen mit 
  	<code>display: inline;</code>
</h1>

<h2>Erstes Beispiel</h2>
<p id="beispiel1"><span>Inline-Boxen können auf mehrere  Zeilen aufgeteilt werden.</span>
</p>

<h2>Zweites Beispiel</h2>
<p id="beispiel2">Inline-Boxen mit unterschiedlicher Höhe können mit <code>vertical-align</code> zueinander ausgerichtet werden.
</p>
</body>
</html>