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