• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Warum kann ich ein Input-Tag (Inline) in der Größe verändern?

mehmet_b_90

Neues Mitglied
Guten Tag zusammen,

bin neu in HTML, CSS, PHP und SQL (bereits Erfahrung in Verbindung mit Java) eingestiegen. Soweit habe ich die Basics drauf und habe auch ein paar Webseiten selbst programmiert.

Was ich mich aber Frage ist, warum ich ein Input-Tag in der Größe per CSS verändern kann, da es doch ein Inline-Element ist (Quelle)? Laut Spezifikation, kann man die Größe nicht verändern, da die Größe sich an den Content anpasst.

Mit freundlichen Grüßen
Mehmet B.
 
Werbung:
Aber das ist es ja was mich verwirrt. Das Input-Tag ist ja von Haus aus ein Inline-Element. Wieso kann ich es dann aber von der Größe her ändern, ohne das ich vorher die CSS-Eigenschaft display: inline-block setze?
 
Zuletzt bearbeitet:
Werbung:
Das Input-Tag ist ja von Haus aus ein Inline-Element. Wieso kann ich es dann aber von der Größe her ändern, ohne das ich vorher die CSS-Eigenschaft display: inline-block setze?
User Agent Stylesheets definieren CSS Standardwerte für HTML-Elemente. Diese unterscheiden sich von Browser zu Browser, im Großen und Ganzen sind sie aber eigentlich gleich (bis auf ein paar kleine Ausnahmen vielleicht).

Das Stylesheet von Chrome ist z.B. das hier:
Chromium

Ich glaube es ist nicht mehr aktuell, aber das ist hier auch irrelevant, da sich an dem Teil, der uns interessiert, definitiv nichts geändert hat. Wenn du dort mal ein bisschen suchst, wirst du feststellen, dass input als display: inline-block definiert wurde.

Wenn du in den Developer Tools (ich benutze Chrome) mal ein Element untersuchst, werden dir auch die Defaultwerte angezeigt:

5243

Es ist ja damit immer noch ein inline Element.
 
Zuletzt bearbeitet:
Danke für deine informative Antwort. Was ich aber immer noch nicht verstehe ist, wenn ich das input-Tag per CSS auf display: inline setze, kann ich die Größe immer noch ändern.
 
Danke für deine informative Antwort. Was ich aber immer noch nicht verstehe ist, wenn ich das input-Tag per CSS auf display: inline setze, kann ich die Größe immer noch ändern.
Es gibt sogenannte replaced elements und non-replaced elements. Replaced elments werden von MDN folgendermaßen definiert:
In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.
Ref
Ein Beispiel dafür sind <img> tags. Ein Bild ist ja kein Text, der zwischen dem opening und closing tag stehen. Stattdessen wird bereits in der Vorbereitungsphase beim Laden der Seite der Content durch das Bild im src tag ersetzt. CSS unterstützt dich dann beim positioning und scaling des Elements, du kannst allerdings nicht das Bild selbst verändern, also z.B. Pixel austauschen oder so. Auch mit Filtern veränderst du den Content des Bildes selbst nicht.

Non-replaced elements sind genau das, was der Name aussagt: Nicht ersetzte Elemente. Das sind z.B. <p> oder <div> tags. Wie ihr Content gerendert wird, ist von CSS abhängig.

Was ist dann ein <input>? Es gibt eine Außnahme was <input type="image"> betrifft:
HTML spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>.
Ref

Alle anderen (wie type="text") sind inline, non-replaced elements.

Die W3C-Recommendation besagt, dass die width property auf folgende Elemente zutrifft:
All elements but non-replaced inline elements, table rows, and row groups
Ref
Dementsprechend müsste auf <input type="text"> die width property nicht zutreffen.

Für einige Elemente gibt es Ausnahmen (Beispiel Buttons):
Otherwise, if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.
Ref
Leider konnte ich eine solche Ausnahme in den HTML-Specs nicht finden. Das fällt also auch raus.

Bis jetzt deutet also nichts darauf hin, dass hier irgendeine Regel es erlauben würde, inputs mit CSS zu manipulieren, sodass width, height, etc. geändert werden könnten.

Die Erklärung, warum inline non-replaced elements (eigentlich) nicht verändert werden können, erklärt die W3 folgendermaßen:
The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.
Ref
Kurzform: Der Inhalt von Inline-Elementen befindet sich in line boxes. Die Breite einer line box kann nicht direkt gesteuert werden. Es wird ausschließlich vom umschließenden Block und floats bestimmt.

Wenn dem aber, z.B. bei Buttons, Folge geleistet werden würde (also Buttons tatsächlig als display: inline gerendert werden würde), dann würde der Content verschoben sein.
5245
Ref

Warum also verhält sich der Button anders? Buttons sind sogenannte atomic inline-level boxes, die sich wie folgt verhalten:
The box is a singular, solid unit, and that it cannot be split across lines like an inline box can when its text cannot all fit on a single line.
[...]
If there is no longer any space on a line to fit an atomic inline box, the entire box wraps to the next line if there is a line break opportunity (otherwise it overflows the line box), even if the atomic inline box contains inline content that would partially fit the remaining space on the current line. This is because the inline content of an atomic inline doesn't participate in the same inline formatting context as the atomic inline itself — it participates in a separate inline formatting context within the atomic inline box, and therefore must remain within the boundaries of the atomic inline box.
Ref
Das Resultat ist, dass Elemente auf einmal wie inline-block Elemente behandelt werden (siehe Beispiel).

In einem (leicht abgeänderten) JSFiddle siehst du das Verhalten. Obwohl der Button auf inline gesetzt ist, wird er als Block dargestellt, eben aufgrund dieser atomic inline box.

Denselben Effekt zeigen inputs, wie sich an diesem JSFiddle erkennen lässt. Ein input wird ja nicht auf einmal Mehrzeilig, wie eine textarea, sondern Einzeilig. Wie bereits in der Definition beschrieben, overflowed der input die Box, da sich keine wrap Möglichkeit anbietet.

Meine Vermutung ist, dass inputs ebenfalls atomic inline-level boxes erzeugen, welche ja wie display: inline-block behandelt werden (siehe Beispiel).

Aber es ist wie gesagt nur eine Vermutung. Ich hoffe allerdings, dass diese der Wahrheit entspricht und ich dir meinen Ansatz und meinen Gedankengang relativ verständlich erklärt habe.
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben