Beispiel:CSS-Box-Modell-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<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" />
<style>
* {
box-sizing: border-box;
}
article {
width: 40em;
border: 2px solid;
display: table:
}
section, aside {
width: 33.333%;
border: 1px solid red;
margin: 0;
padding: .5em;
display: table-cell;
}
</style>
<title>Das alternative Boxmodell</title>
</head>
<body>
<h1>Das alternative Boxmodell</h1>
<main>
<article>
<section>
<h2>Box-Modell</h2>
<p>Die vom Browser erzeugte Box wird durch Höhe und Breite, aber auch durch Innen- und Außenabstände sowie Rahmen, festgelegt.</p>
<p>So müssen Sie bei Block-Elementen stets die tatsächliche Breite eines Elements berücksichtigen.</p>
</section>
<section>
<h2>box-sizing</h2>
<p>Mithilfe der Eigenschaft box-sizing lässt sich spezifizieren, worauf sich die Angaben von <code>width</code> bzw. <code>height</code> beziehen sollen.</p>
<p>Durch <code>box-sizing: border-box</code> werden Innenabstand und Randlinie nun ohne weitere Berechnung von uns durch den Browser bei der Breitenberechnung berücksichtigt.</p>
</section>
<aside>
<h2>Links</h2>
<ul>
<li><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing">box-sizing</a></li>
<li><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle">display: table</a></li>
</ul>
</aside>
</article>
</main>
</body>
</html>