CSS Box-Modell padding-right, padding-bottom

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen

Bin Anfänger.
Ich bin gerade etwas mit dem Box-Modell in CSS beschäftigt, habe einige Versuche gemacht mit dem h1 Element. Ich habe ihm eine Hintergrundfarbe gegeben, einen Rahmen, ein Text als Inhalt. Ich kann die Attribute gut nachvollziehen (auch padding top und padding left), aber für was padding-right und padding-bottom gut sein soll, das habe ich nicht verstanden.

Könnt ihr mir erklären, wann diese eingesetzt werden?
Bei mir verändert sich nichts, nur width und height helfen mir den Abstand vom Text zum unteren Rand bzw. vom Text zum rechten Rand zu vergrössern.

Liebe Grüsse
hl. A.v.P.

#2

Hallo .

Padding : oben rechts unten links;

du kannst auch jedes einzelnt ansprechen

padding-top
padding-right
padding-bottom
padding-left

will ich abstand zu einer richtung setze ich dort den padding.
Aber beachte das h1 ist vor formatiert vom Browser mit default werten.
Somit ist dort auch eine Text-height etc mit drinne .

h1 ist also ein schlechtes element um sich das padding verhalten anzugugen.
Bei selfhtml mal die zeichnung anschauen.

http://de.selfhtml.org/css/eigenschaften/innenabstan…

#3

Hi TechPech

Schon mal vielen lieben Dank für’s schnelle Antworten.
Leider hast du meine Fragen nicht beantwortet. Liegt wahrscheinlich
an meiner Formulierung. Ich versuch’ es also noch anders:
Ich werde mich mal von h1 distanzieren. Also stell’ dir vor, du hast ein Box definiert, ungefähr so:

div.box {
30px 20px 30px 20px;
height: 200px;
width: 400px;
border: 1px solid black;
background: orange;
text-align: justify;
}

Wenn ich nun den Parameter padding-bottom massiv erhöhe, ändert sich der Abstand nur sehr wenig. Der Abstand vom Text zum unteren Rahmen wird schon durch die Höhe (height) definiert. Was braucht es da dieses padding-bottom? Was macht hier der geübte Webdesigner, alles ein bisschen pi mal Handgelenk?

Liebe Grüsse
hl. A.v.P.

#4

Hallo,

Schon mal vielen lieben Dank für’s schnelle Antworten.
Leider hast du meine Fragen nicht beantwortet. Liegt
wahrscheinlich
an meiner Formulierung. Ich versuch’ es also noch anders:
Ich werde mich mal von h1 distanzieren. Also stell’ dir vor,
du hast ein Box definiert, ungefähr so:

div.box {
30px 20px 30px 20px;
height: 200px;
width: 400px;
border: 1px solid black;
background: orange;
text-align: justify;
}

Wenn ich nun den Parameter padding-bottom massiv erhöhe,
ändert sich der Abstand nur sehr wenig. Der Abstand vom Text
zum unteren Rahmen wird schon durch die Höhe (height)
definiert. Was braucht es da dieses padding-bottom? Was macht
hier der geübte Webdesigner, alles ein bisschen pi mal
Handgelenk?

Eine h1 ist wirklich ein eher schlechtes Beispiel. Nimm lieber ein div.

Ich habe also als Beispiel einen Bereich auf meiner Website (zB News-Ticker auf der Startseite), in den (durch ein CMS) immer wieder andere Inhalte einfließen.
Dadurch weiß ich ja nicht, wie hoch die Box sein wird, ich weiß aber, dass ich gerne zwischen Text und Rand der Box 10px Abstand hätte.
Da benutze ich padding.

HTH
Grüße
Christian
http://netz-coaching.de

#5

sorry aber text und padding , das passt nicht wirklich zusammen.
denn text kann immer anders aussehen im verhalten, gibt es unterstrich braucht es weniger freiraum. Deswegen gibt es z.b. line-height somit weiss du wie hoch dein text wird maximal und danach kommt das padding.

Und warum das verhalten anders ist, wenn du die unterschiedlichen werte eingibst liegt auch daran welcher wert priorität hat. Immerhin is eine webseite ein flss von objekten.

dieses layout publishing denken kommt aus den printmedien haben aber nix mit browser zu tun. auch pixel müsste man eigendtlich unterlassen :smile:

#6

Hi,

30px 20px 30px 20px;

hier hast Du lediglich die Werte, aber nicht die Eigenschaft angegeben. Diese fehlerhafte Regel muss also ignoriert werden.

Gruß
Ingo

#7

ja hast Recht, danke!

#8

Hallo

Meinst du deine Seite Netz.coatching? Ich kann leider den Newsticker nicht finden und hätte gern ein Beispiel angeschaut.
Übrigens cool dieses „socbuttons“-Ding, das da herauskommt. Kann man das alles mit CSS machen?

LieGrü

#9

Hallo,

Meinst du deine Seite Netz.coatching? Ich kann leider den
Newsticker nicht finden und hätte gern ein Beispiel
angeschaut.

Nein, das war ein fiktives Beispiel.
Aber zB die „Aktuell“-Box auf der Startseite von http://www.lvld.de/ ist prinzipiell so gebaut.

Übrigens cool dieses „socbuttons“-Ding, das da herauskommt.
Kann man das alles mit CSS machen?

Nein, da ist für die Bewegung noch ein bisschen jquery mit am Start.
Mit CSS-3 Transitions könnte es vermutlich auch gehen, aber da hab ich mich leider noch nicht genug mit beschäftigt.

Grüße
Christian

#10

Immerhin is eine webseite ein fluss von
objekten.

dieses layout publishing denken kommt aus den printmedien
haben aber nix mit browser zu tun. auch pixel müsste man
eigendtlich unterlassen :smile:

Wo wir grad’ beim Thema sind…
Was ist eigentlich diese em-Einheit genau?
Dass pixel eine Unsinnige Einheit beim erstellen einer Website ist, habe ich schon gemerkt, weiss aber momentan noch nicht wo die geeignete Lösung steckt.

Danke und liebe Grüsse

#11

Moin,

Eine h1 ist wirklich ein eher schlechtes Beispiel. Nimm lieber
ein div.

Wie kommst Du darauf? Beides sind Block-Elemente, beide verhalten sich für dieses Problem gleich.

Grüße,
-Efchen

#12

Moin,

sorry aber text und padding , das passt nicht wirklich
zusammen.

Warum?

denn text kann immer anders aussehen im verhalten, gibt es
unterstrich braucht es weniger freiraum. Deswegen gibt es z.b.
line-height somit weiss du wie hoch dein text wird maximal und
danach kommt das padding.

line-height ist aber was ganz anderes als padding. Wenn ich ein Block-Element habe, das Text enthält, wieso soll ich nicht den Abstand nach unten definieren wollen? text und padding passt genauso gut zusammen wie padding und alles andere. Noch besser verdeutlicht ist das, wenn das Element, das den Text enthält, einen Rahmen hat. Denn padding legt ja den Abstand vom Text zum Rahmen fest.

line-height hingegen ändert die Zeilenhöhe *jeder* Zeile, also den Abstand der Zeilen zueinander, aber nicht den Abstand zum Außenrand des Elternelements.

auch pixel müsste man
eigendtlich unterlassen

Nicht unbedingt. In jedem Fall besser als pt, denn das ist nur für die Druckausgabe.

Grüße,
-Efchen

#13

Moin,

Was ist eigentlich diese em-Einheit genau?

Das ist eine Größeneinheit, die sich auf die aktuelle Schriftgröße bezieht. Zum einen wachsen Elemente, deren Größe mit „em“ festgelegt wird, mit Veränderung der Schriftgröße mit.
Zum anderen kann der Benutzer die Standardschriftgröße in seinem Browser ändern, ohne dass sich das geplante Layout der Website ändert, wenn es mit „em“ gemacht ist. Denn es soll ja Menschen geben, die nicht so gut sehen und daher die Schriftgröße in ihrem Browser höher einstellen.
Leider glauben immer noch sehr viele Webmaster, dass sie ihre Schriftgröße auch diesen Benutzern aufzwingen müssen und ignorieren das, indem sie für ihre Schriftgröße etwas anderes verwenden, als die Einheit „em“.

Dass pixel eine Unsinnige Einheit beim erstellen einer Website
ist, habe ich schon gemerkt

So allgemein gesagt ist das sicher nicht richtig. Pixel ist eine Einheit, die wunderbar zu einem Bildschirm passt. Pixelgenaue Layouts hingegen sind im WWW nicht sinnvoll, weil man nicht weiß, was für eine Fläche überhaupt für die Inhalte zur Verfügung stehen.

weiss aber momentan noch nicht wo
die geeignete Lösung steckt.

In flexiblen Layouts, die hauptsächlich mit „em“ gestaltet sind.
Aber eine Kombination mit Elementen, deren Größe in Pixeln festgelegt ist, macht durchaus Sinn. Das sieht man in Einzelfällen.

Grüße,
-Efchen

#14

Moin,

Der Abstand vom Text
zum unteren Rahmen wird schon durch die Höhe (height)
definiert.

Nein, das ist falsch. Da hast Du Dir das fehlerhafte Box Model des Internet Explorers im Quirks Mode angeeignet.

Die Größe eines Elements wird errechnet aus 2x margin + 2x border + 2x padding + height bzw. width.

Im falschen Box Model rechnet der IR padding mit in height/width ein, das ist richtig. Aber falsche Modelle sollte man nicht lernen. Man muss da nur wissen, dass man das abstellt, indem man den IE mit einem geeigneten Doctype in den Standards Mode umschaltet. Man kann schließlich keine Websites erstellen, wenn jeder seine eigenen Standards festlegt.

Grüße,
-Efchen

#15

Moin,

wie ich weiter unten schon schrieb, gehst Du von einem falschen Box Model aus. Da liegt Dein Verständnisproblem begraben.

Besorg Dir doch diverse Tools, z.B. zeigt Firebug für Firefox auch Layout einzelner Elemente an, da sieht man auch sehr schön, wo die ganzen Größen stecken.

Ich empfehle auch, niemals eine Website mit dem IE zu erstellen. Der macht einfach zu viele Fehler, vor allem, wenn man sich noch nicht mit Doctypes auseinander gesetzt hat und nicht weiß, wie man ihn in den Standards Mode schaltet. Andere Browser machen von Hause aus alles richtig.

Grüße,
-Efchen

#16

Moin,

Eine h1 ist wirklich ein eher schlechtes Beispiel. Nimm lieber
ein div.

Wie kommst Du darauf? Beides sind Block-Elemente, beide
verhalten sich für dieses Problem gleich.

Zum Üben und Verstehen halte ich ein div für geeigneter weil es zum einen nicht noch von line-height abhängig ist und zum anderen eine h1 gerne mal nur eine Zeile läuft - und da ist es dann tatsächlich egal, ob ich über height oder über padding arbeite (zumindest optisch in der Ausgabe).

Um aber das Box-Modell zu verstehen halte ich es zum Üben für schlauer, mit etwas zu arbeiten, was auch im ersten Verständnis sofort wirklich eine ‚Box‘ ist - und nicht eine Zeile.

Die Abstraktion hinterher von div->h1 fällt dann leichter, als wenn man zuerst die Abstraktion von Zeile->Box leisten muss.

Denke ich zumindest :wink:

Greetinx
Christian
http://netz-coaching.de

#17

Moin,

anderen eine h1 gerne mal nur eine Zeile läuft

Was man so allgemein natürlich nicht sagen kann. Es kommt auf den Einzelfall an. Genauso könnte es umgekehrt sein.

und da ist es
dann tatsächlich egal, ob ich über height oder über padding
arbeite (zumindest optisch in der Ausgabe).

Nein, das ist es sicher nicht. Wird hier nur eine Größe über height festgelegt, ist die Höhe des Elements fix. Wird padding verwendet, ist die Höhe des Elements variabel, weil sie dann vom Inhalt abhängig ist. Egal ob eine oder zwei Zeilen, die Größe der Schrift kann ja verstellt werden. Nutzt man nur height, „platzt“ die Box irgendwann und der Text geht über die Ränder hinaus. Nutzt man nur padding, kann das nicht passieren, weil die Höhe der Box mitwächst.

Aber egal ob h1 oder div, beide verhalten sich da logischerweise gleich.

Um aber das Box-Modell zu verstehen halte ich es zum Üben für
schlauer, mit etwas zu arbeiten, was auch im ersten
Verständnis sofort wirklich eine ‚Box‘ ist - und nicht eine
Zeile.

Auch eine Überschrift ist eine Box. Ist ja auch nicht umsonst ein Block-Element und kein Inline-Element. Das hört sich jetzt für einen Neuling eher so an, als würdest Du vermitteln wollen, dass h1 ein Inline-Element ist, die bestehen nur aus einer Zeile.

Die Abstraktion hinterher von div->h1 fällt dann leichter, als
wenn man zuerst die Abstraktion von Zeile->Box leisten muss.

Ich denke, das macht jeder mit sich selbst aus, was er für leichter hält und was nicht. Den Unterschied zwischen Block- und Inline-Element sollte man schon vorher wissen. Damit man beim Block-Element z.B. auch weiß, dass sich das Element über die komplette Breite erstreckt.

Denke ich zumindest :wink:

Eben :smile:

Liebe Grüße,
-Efchen