Zeilenboxen und display-Eigenschaft

index.html

<h1>Zeilenboxen und display-Eigenschaft</h1>
<p>Jeder Text wird durch eine Zeilenbox repräsentiert. Manche Buchstaben haben Unterlängen und hängen darunter. Elemente, die innerhalb eines Absatzes auftauchen dürfen, sind sogenannte Inline-Elemente. Bei ihnen wirken die vertikalen <code>margins</code> und <code>paddings</code> nicht. Experimentieren Sie mit <code>display: inline-block</code> sowie <code>margin</code> und <code>padding</code>.</p>
<h2>Beispielabsatz mit Markierungen</h2>
<p>Bavaria ipsum dolor sit amet i moan scho <span>aa Trachtnhuat kloan Edlweiss</span> oamoi do griaß God beinand des is hoid aso und des muas ma hoid kenna. <mark>Abfieseln</mark> hoid Biakriagal Breihaus pfiad de. Diandldrahn heid is a geh auszutzeln. Auffi unbandig de Sonn Mamalad a geh ned woar pfiad de Engelgwand lem und lem lossn zwoa san. <strong>Trachtnhuat wolpern</strong> pfiad de kumm geh, hoam. Hoid Mamalad du dadst ma scho daugn Maderln imma obandeln sog i <em>Schuabladdla Schaung</em> kost nix wia da Buachbinda Wanninger Graudwiggal. <b>I bin a woschechta Bayer</b> ebba o’ha liberalitas Bavariae in da kummd <i>Biazelt Schdeckalfisch</i> zünftig.</p>

style.css

/* === verwendete Elemente ==== */
b {}
span {}
i {}
em {}
strong {}
mark {}

/* ============== */
p {
  font-size: 20px;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />

zeilenboxen-und-display-eigenschaft.markdown

Zeilenboxen und display-Eigenschaft

A Pen by Jens Grochtdreis on CodePen.

License.