Problem mit Rahmen

[Gunnar Bittersmann]

@@oxo888oxo:

nuqneH

Bei der ersten verstehe ich nicht, warum der rechte und linke rote Rand nicht bis ganz nach oben bzw. unten an der schwarzen Rand heranreicht.

Weil die Höhe des div sich nach dessen Inhalt richtet, wobei der Außenabstand (margin) der Elemente darin nicht mit einfließt. Das ändert sich, wenn das div oben bzw. unten Rahmen (border) hat; dann wird der Außenabstand der Elemente darin mit vom Rahmen mit eingeschlossen.

Wenn die roten Linien bis oben/unten gehen sollen, braucht das div oben/unten Rahmen:

div  
{  
  border-top: 1px solid transparent;  
  border-bottom: 1px solid transparent;  
  border-left: 1px solid red;  
  border-right: 1px solid red;  
}

oder kurz:

div  
{  
  border: 1px solid;  
  border-color: transparent red;  
}

Qapla'