Sudsaat: border-left von div nicht ganz dargestellt

SELF-Forum

border-left von div nicht ganz dargestellt

Sudsaat
– Informationen zu den Bewertungsregeln

Hallo zusammen,

eine kleine Verständnisfrage, ich habe ein div-element, welches eine margin von 0 und einer border-left von 1px hat. innerhalb befindet sich ein p-element, mit margin 1em in alle richtungen. Wieso wird die border des div-elementes nicht in voller Höhe des div-elementes angezeigt? Definiere ich einen rahmen um den gesamten div, wird der linke rahmen ebenfalls ganz angezeigt. Nur mit border-left wird der Rand um das margin des p-elementes darin gekürzt.
Sollte das p-element den div nicht strecken (ersichtlich, wenn ihr aus border-left: 1px... ein border: 1px macht)?

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
<head>  
 <meta http-equiv="Content-Type"   content="text/html; charset=UTF-8" />  
 <meta http-equiv="Content-Script-Type" content="text/javascript" />  
 <meta http-equiv="Content-Style-Type" content="text/css" />  
  
 <title>Entwicklungs-Instanz</title>  
  
 <link type="text/css" rel="stylesheet" href="/css/test.css" />  
  
</head>  
<body>  
  <div class="content">  
    <p>Test</p>  
  </div><!-- content -->  
</body>  
</html>

..und hier das css-snippet:

  
* {  
 margin: 0em;  
 padding: 0em;  
 }  
body {  
 font-family: Verdana,Tahoma,Helvetica,Arial,sans-serif;  
 font-size: 100.1%;  
 }  
.content {  
 margin-left: 10em;  
 border-left: 1px solid gray;  
 }  
p {  
 font-size: 0.8em;  
 margin: 1em;  
 }

Vielen Dank im Voraus.

Gruß Sudsaat :-)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. border-left von div nicht ganz dargestellt

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    Wieso wird die border des div-elementes nicht in voller Höhe des div-elementes angezeigt?

    der Rahmen wird vollständig angezeigt, das Element ist nur weniger hoch als von Dir erwartet. Vermutlich ist Dir das Konzept der Collapsing Margins nicht bekannt.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. border-left von div nicht ganz dargestellt

      Sudsaat
      – Informationen zu den Bewertungsregeln

      Hi Cheatah,

      der Rahmen wird vollständig angezeigt, das Element ist nur weniger hoch als von Dir erwartet. Vermutlich ist Dir das Konzept der Collapsing Margins nicht bekannt.

      Vielen Dank!
      hast recht, war mir bei verschachtelten elementen bisher nicht in dieser form bekannt, nur bei aufeinanderfolgenden elementen. Gibt es da schöne workarounds (ein padding von 1px beim div-element genügt ja schon um das collapsing zu unterdrücken - ist aber sicher nicht die elegante art).

      Vielen Dank.

      Grüßle

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln