Верхний край CSS div

Question

Я пишу веб-сайт, и у меня есть некоторые проблемы с запасом.

У меня есть следующий HTML-код:

<div id="mainBody"> 
    <div class="subTitle" id="backgroundTitle" > 
     <h3> 
      Background 
     </h3> 
    </div> 
</div> 

мой CSS код следующим образом:

#mainBody{ 
    height:200px; 
    width: 500px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
} 


.subTitle { 
    margin-top=0px; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 


h3 { 
    margin-top:100px; 
    margin-bottom:0px; 
} 

результат я ожидал, что "mainBody" ДИВ имеет 0px верхнее поле время h3 внутри имеет верхний край 100px. Однако я получил вместо этого то, что div «mainBody» смещается вниз вместе с h3, что означает, что оба они имеют верхний предел в 100 пикселей по отношению к верхней части страницы.

Кто-нибудь знает, почему это происходит?

Большое спасибо!

Answer 1

Добавить display:inline-block; в класс элементов h3.

h3 { 
    margin-top:100px; 
    margin-bottom:0px; 
    display:inline-block; 
} 

Js Fiddle Demo

Answer 2

Я не уверен, что вы действительно нуждаетесь в <h3> - вы можете просто стиль текста в подзаголовке.

CSS

#mainBody{ 
    height:200px; 
    width: 500px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
} 
.subTitle { 
    margin-top=0px; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 70px; 
    border: 1px solid red; 
    font-size: 26px; 
    font-weight: bold; 
    text-align: center; 
    border-top: 6px solid red; 
} 

HTML

<div id="mainBody"> 
    <div class="subTitle" id="backgroundTitle" > 
     Background 
    </div> 
</div> 

FIDDLE

Answer 3

Я не вижу никаких проблем! См. Fiddle. Я добавил границы элементам, чтобы четко видеть позицию элемента.

Примечание: Я тестировал в FF 26.0, Chrome 32.0 на Ubuntu 12.04 LTS.

Вот как это выглядит:

я добавил границы, чтобы увидеть границы элемента:

#mainBody{ 
    ... 
    border:1px solid red; 
} 

.subTitle { 
    ... 
    border:1px solid green; 
} 


h3 { 
    ... 
    border:1px solid blue; 
} 

Answer 4

Во время рабочего процесса, Вам нужно будет удалить рушится, за что вы, вероятно, необходимо это http://nicolasgallagher.com/micro-clearfix-hack/