Ссылка c display:block и margin-top отталкивается не от родительского блока. Как исправить?

Типичная проблема. Надоело искать обходные пути и решил разобраться в чем дело.



Структура кода

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/style.css" type="text/css" />
  </head>
  <body>
    <div id="wrapper">
      <div class="header">
        <a class="logo" href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="" /></a>
      </div>
      <div class="menu"></div>
      <div id="prefooter"></div>
    </div>
    <div id="footer"></div>
  </body>
</html>


/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}



.clear {
  clear: both;
}

body, html {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  width: 1280px;
  margin: 0 auto;
  top: 0;
  position: relative;
 
}

#wrapper  > div {
  width: 100%;
  clear:both;
  position: relative;
}

.header {
  height: 116px;
  background: url(../images/header-bg.jpg) no-repeat 100% 0;
  position: relative;
}

.logo {
  position: relative;
  display: block;
  margin-left: 40px;
  margin-top: 30px;
}


Как видно у нас a.logo находится внутри блока header, который находится внутри wrapper.
Но при задании параметров и отступов для ссылки, она отталкивается от wrapper, а не от header, тем самым смещает его ниже.

Что делается не так и почему так происходит?

Что интересно, при добавлении правила
* { border: 1px solid black} все становится на свои места.
0
css html верстка

1 ответов

Может будет достаточно для класса .logo прописать размеры?

0

Проблема ваша очень похожа на margin collapse.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

1