Sudsaat: border-left von div nicht ganz dargestellt

Beitrag lesen

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 :-)