problem mit margin innerhalb des div

alexf812 · 22.08.2007, 21:48

hi,

wenn ich der überschrift ein margin verpasse, dann wird das untere div auf einmal um diesen abstand nach unten geschoben, und es entsteht eine lücke, obwohl sich die überschrift ja innenrhalb eines div befindet. habe mal ein bild angefügt und den code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.roundcorner_head {
  background: url(li_o1.gif) top left no-repeat;
}

.roundcorner_head div {
  background: url(re_o1.gif) top right no-repeat;
  height: 11px;
  font-size: 1px; line-height: 1px;
}

.roundcorner_footer {
  background: url(li_u1.gif) bottom left no-repeat;
  margin-bottom: 25px;
}

.roundcorner_footer div  {
  background: url(re_u1.gif) bottom right no-repeat;
  height: 11px;
  font-size: 1px; line-height: 1px;
}

.roundcorner_content{border: solid #eaeaea; background-color: #f2f2f2; border-width: 0px 3px; padding: 0 10px;}
</style>
</head>

<body>
<div style="width: 500px;">
<div class="roundcorner_head"><div></div></div>
 <div class="roundcorner_content">
   <h1 style="margin: 0 0 10px 0;">test</h1>
 </div>
<div class="roundcorner_footer"><div></div></div>
</div>
</body>
</html>

webcreate · 22.08.2007, 21:58

Was ist daran verwunderlich? margin ist immerhin ein Außenabstand.

alexf812 · 22.08.2007, 22:09

das ist mir schon klar, nur habe ich ja den aussenabstand nicht fürs div definiert, sondern die darin befindliche überschrift... warum wird dann aber das nachfolgende div nach unten geschoben?

webcreate · 22.08.2007, 23:07

Was soll ich nun sagen? Weil es so ist. Nutze ein padding und gut ist.