Modell

Boxen

Alle Ränder gleich: `margin: 5px;

Alle Ränder unterschiedlich:

margin: 1px 2px 3px 4px;

Reihenfolge: oben, rechts, unten, links

Alle Ränder einzeln:

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

border: 5px solid #ffffff; Dicke des Rahmens, Muster, Farbe

Alle Ränder gleich: `padding: 5px;

Alle Ränder unterschiedlich:

padding: 1px 2px 3px 4px;

Reihenfolge: oben, rechts, unten, links

Alle Ränder einzeln:

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

`visible`	Der Inhalt ragt aus dem Element heraus. Der gesamte Inhalt ist sichtbar.
`hidden`	Der Inhalt wird abgeschnitten. Teile des Inhalts sind nicht sichtbar.
`scroll`	Der Inhalt wird abgeschnitten. Der Browser sollte allerdings Scrolleisten anzeigen, damit der Rest des Inhalts angezeigt werden kann.
`auto`	Der Browser macht es so, wie er „will“.

CSS	Beschreibung
`float:left`	An der nächsten freien Stelle links anschließen
`float:right`	An der nächsten freien Stelle rechts anschließen.
`float:none`	Kein Textumfluss
`float:inherit`	Positionierung wie das Elternelement

CSS	Beschreibung
`clear: left`	Der neue Inhalt kann sich nicht an eine links-floatende Box nicht anschließen.
`clear: right`	Der neue Inhalt kann sich nicht an eine rechts-floatende Box nicht anschließen.
`clear: both`	Der neue Inhalt wird in einer neuen Zeile angeordnet.

<div class="aussen">
	<div>
		<img src="bild.img">
	</div>
	<div>
		<img src="bild2.img">
	</div>
</div>

.aussen>div{
	box-sizing: border-box;
	width: 23%;
	float: left;
	margin: 1%;
}
 
.aussen>div>img{
	width: 95%;
	margin: 2.5% 2.5%;
}

.container {
  box-sizing: border-box;
}

.invisible-elements {
  visibility: hidden;
}