Div breiter als Input?

[hawkmaster]

Hallo zusammen,

vermutlich gibt es eine ganz einfache Erklärung?
Auf einer Seite habe ich zum Test zwei Input type=text plaziert.
Diese sollen nebeneinander sein.
Was mich nun wundert:
Das Div (test) hat 15em. Auch die Input haben 15em.
Trotzdem ist in der Ansicht das Div breiter als die Inputs.
Zum nächsten Input besteht ein Zwischenraum. Eigentlich müssten sie doch genaus breit sein oder?

  
<div class="test">  
	<div>  
    <label for="test1">&nbsp;</label>  
    <input name="test1" id="test1" type="text" value="test1" />  
	</div>  
	<div>  
    <label for="test2">&nbsp;</label>  
    <input name="test" id="test2" type="text" value="test2" />  
	</div>  
</div>  
Des CSS Code dazu.  

  
.test div {  
  float:left;  
  width:15em;  
  background-color:#00FF33;  
  border:medium;  
  border-color:#0033CC;  
  border-style:dotted;  
}  
.test label {  
  display:block;  
}  
.test input {  
   width:15em;  
}  

vielen Dank und viele Grüße
hawk

[Marc]

Hallo hawk,

Das Div (test) hat 15em. Auch die Input haben 15em.

plus Innen- und/oder Außenabstände (padding/margin)

Viele Grüße,
Marc.

[hawkmaster]

Hallo Marc,
danke für deine Hilfe.

plus Innen- und/oder Außenabstände (padding/margin)

es ist doch aber nirgends ein padding oder margin definiert!
Dann wäre es mir auch klar gewesen.

vielen Dank und viele Grüße
hawk

[Marc]

Hallo,

Hallo Marc,
danke für deine Hilfe.

plus Innen- und/oder Außenabstände (padding/margin)

es ist doch aber nirgends ein padding oder margin definiert!
Dann wäre es mir auch klar gewesen.

Doch - im CSS, das der Browser mitbringt (gilt für viele Elemente).

Ehrlich gesagt, weiß ich jetzt aus dem Kopf nicht, wie das mit Text-Eingabefeldern ist. Probiers einfach mal aus:

input {  
  padding:0;  
  margin:0;  
}

Viele Grüße,
Marc.

[hawkmaster]

Hallo MArc,

hm,

selbst wenn ich im Div und auch im Input Padding und Margin auf 0 setze, ändert das nichts.
Das Div mit dem grünen Hintergrund ist immer breiter.

  
.test div {  
  float:left;  
  width:15em;  
  background-color:#00FF33;  
  border:medium;  
  border-color:#0033CC;  
  border-style:dotted;  
  padding:0;  
  margin:0;  
  
}  
.test label {  
  display:block;  
}  
.test input {  
 width:15em;  
 padding:0;  
 margin:0;  
}  

vielen Dank und viele Grüße
hawk

[Der Martin]

Hallo,

selbst wenn ich im Div und auch im Input Padding und Margin auf 0 setze, ändert das nichts.
Das Div mit dem grünen Hintergrund ist immer breiter.

breiter als ... ?
Es ist dir vielleicht nicht bewusst, aber du hast ja vor dem label, zwischen label und input, sowie hinter dem input auch jeweils noch Whitespace (nämlich den Zeilenumbruch im Quelltext), der in HTML auf je ein Leerzeichen kondensiert wird. Demzufolge enthalten deine beiden divs:

[SP]<label />[SP]<input />[SP]

Dieses Leerzeichen belegt natürlich abhängig von der Schriftart und -größe, die in diesem div gilt, ein paar Pixel Breite.

Ciao,
 Martin

[Struppi]

Das Div (test) hat 15em. Auch die Input haben 15em.
Trotzdem ist in der Ansicht das Div breiter als die Inputs.
Zum nächsten Input besteht ein Zwischenraum. Eigentlich müssten sie doch genaus breit sein oder?

em ist eine relative Größe, relativ zur Schriftgröße. input haben anscheinend eine kleinere Schriftgröße als das Dokument.

Kann es sein, dass du schonmal über dieses Problem gestolpert bist?

Struppi.

[hawkmaster]

Hallo Struppi,
tausend Dank für deine Hilfe.

em ist eine relative Größe, relativ zur Schriftgröße. input haben anscheinend eine kleinere Schriftgröße als das Dokument.

Ja da hast du voll ins Schwarze getroffen.
Es ist wirklich so, dass die Inputs kleinere Schriftgrössen haben.
Ich müsste mit der em Angabe das Input schon auf 18em setzen damit es genauso breit wird wie das Div mit 15em.
Stelle ich hingegen alles auf 150px dann passt es optimal.

Kann es sein, dass du schonmal über dieses Problem gestolpert bist?

Nein das war ein anderes Problem. Damals ging es glaube ich um die Schriftgösse im Body. Hier konnte ich mir nur nicht die Unterschiede zwischen den Größen erklären.
Ich bin nur auf em umgestiegen, weil ich immer wieder gelesen habe, das wäre besser und "valider".

vielen Dank und viele Grüße
hawk

[Struppi]

Ich bin nur auf em umgestiegen, weil ich immer wieder gelesen habe, das wäre besser und "valider".

Das ist Quatsch. Es ist flexibler und nimmt mehr Rücksicht auf die Einstellung im Browser, wobei die Zeiten, wo eine Seite nicht gezoomt werden konnte, weil sie mit Pixelgrößen arbeitet, vorbei sind.

Wenn ein element so breit sein soll wie das Elternelemt, dann nimm doch width:100%

Struppi.

[hawkmaster]

Das ist Quatsch. Es ist flexibler und nimmt mehr Rücksicht auf die Einstellung im Browser, wobei die Zeiten, wo eine Seite nicht gezoomt werden konnte, weil sie mit Pixelgrößen arbeitet, vorbei sind.

Da gebe ich dir völlig recht. Dennoch ist es leider immer noch so, dass bestimmte Validatoren und Tests für barrierefreies Design, immer noch Angaben mit PX verpönen.
Vielleicht mache ich es doch wieder wie vorher mit PX.

vielen Dank und viele Grüße
hawk

[Beat]

Das ist Quatsch. Es ist flexibler und nimmt mehr Rücksicht auf die Einstellung im Browser, wobei die Zeiten, wo eine Seite nicht gezoomt werden konnte, weil sie mit Pixelgrößen arbeitet, vorbei sind.

Da gebe ich dir völlig recht. Dennoch ist es leider immer noch so, dass bestimmte Validatoren und Tests für barrierefreies Design, immer noch Angaben mit PX verpönen.
Vielleicht mache ich es doch wieder wie vorher mit PX.

Ich habe in meinem Browser als Minimale Fontgrösse 12 px eingestellt und mir selber ein Ei gelegt, als ich im CSS mit em doch mal kleine Schrift brauchte. Bei mir war es lesbar, bei den anderen wirklich nicht mehr.

Wir warten auch rem.

mfg Beat