Сьезжающие вниз блоки(Глюк margin:0 auto и/или border:1px solid black)

ilaga · August 21, 2012

Здравствуйте.

Сама совсем недавно начала разбираться с вёрсткой сайтов. И вот уже с самого начала появилась проблема, которую не выходит решить самостоятельно.

Так что, прошу помоч.

Для более наглядного размещения блоков, исполйзовала border: 1px solid black.

После удачного размещения все бордеры поставила в ковычки.

Но после этого блоки container и header сьехали вниз на 70px (на сколько я понимаю).

Блок logo остался на том же месте где был (по отношению к верхней границе экрана).

в чем ошибка?

INDEX -

<body>
<div id="container">
  <div id="header">
    <div id="logo">
      <a href="index.php"></a>
    </div>
  </div>
</div>
</body>

CSS -

body {
background-color: white;
margin: 0;
padding: 0;
}

#container {
/*border: 1px solid black;*/
background-image: url('images/container.jpg');
background-repeat: no-repeat;
width: 1153px;
height: 865px;
margin: 0 auto;
padding: 0;
}

#header {
/*border: 1px solid red;*/
background-image: url('images/header.png');
background-repeat: no-repeat;
width: 1114px;
height: 165px;
margin: 0 auto;
}

#logo {
/*border: 1px solid blue;*/
background-image: url('images/logo.png');
background-repeat: no-repeat;
width: 243px;
height: 65px;
margin: 70px 0 0 25px;
}

panig · August 21, 2012

Эм, почему так происходит не скажу, но решается так:

добавить в #logo

display:inline-block;

ilaga · August 21, 2012

Спасибо!

Добавила, заработало как нужно!

wwt · August 21, 2012

Эм, почему так происходит не скажу, но решается так:
добавить в #logo
display:inline-block;

Это называется схлопывание, пока были заданы бордеры эффект себя непроявил ибо это одно из свойст которое отменяет эффект схлопывания.

В данном случае можно применить и overflow:hidden вот так http://jsfiddle.net/FFVjr/1/ или задать паддинги.

Edited August 21, 2012 by wwt

Sign In

Сьезжающие вниз блоки(Глюк margin:0 auto и/или border:1px solid black)

Question

ilaga

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

panig

Link to comment

Share on other sites

ilaga

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information