"box-sizing: border-box;", geht auch viel einfacher, oder?

Hallo liebe Forumgemeinde!

Ich bin absoluter Neuling in der HTML und CSS Welt und habe erst vor ein paar Tagen angefangen, mich damit zu beschäftigen. Auf der Suche nach einem Forum habe ich mich für dieses entschieden, weil die Antworten kompetent sind und der Umgangston sehr nett ist.

Ich hoffe, nicht gleich eine sehr dumme Frage zu stellen [gibt es ja wohl eigentlich nicht, sagt man :-)].

Ich habe eine Box mit 100% Breite und fester Höhe erstellt. Nachdem ich diese mit einem Rand versehen habe, passt sie natürlich nicht mehr in das Browerserfenster und es erscheint unten ein Scrollbalken. Also habe ich "box-sizing: border-box; angewandt und es hat alles wunderbar in das Browserfenster gepasst. Die CSS sieht so aus:
[/color][/font]

body {
	margin: 0px;
}
.box_a {
	width: 100%;
	height: 150px;
	border-style: solid;
	border-width:2em;
	background-color: #F00E12;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Nun ist mir durch einen Zufall aufgefallen, dass genau dieser Effekt auch ohne "box-sizing: border-box;" funktioniert, wenn man irgendwas in die erste Zeile der CSS-Beschreibung für die Box schreibt:

body {
	margin: 0px;
}
.box_a {
	hier kann irgendetwas stehen
	width: 100%;
	height: 150px;
	border-style: solid;
	border-width:2em;
	background-color: #F00E12;
}

Ich habe das mehrmals an verschiedenen Browsern getestet, wie kann man das erklären?

Vielen Dank!
Peter

Hallo,

das will ich ja gar nicht. Ich würde nur gern wissen, was da genau passiert. Schon um die "CSS-Welt" besser verstehen zu lernen

Peter

Oh danke, das hat mir geholfen! Jetzt habe ich's verstanden.

Schönes Wochenende!

Peter