margin-top у дива внутри другого дива

clavin · May 26, 2010

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

Столкнулся с такой непонятной проблемой, которая встречается во всех браузерах, за исключением IE6.

Есть два вложенных дива, расположенных вверху страницы. Когда для внутреннего дива я задаю верхнее поле margin-top:20px; ,то внешний див смещается вниз. Это хорошо видно в Firebug. Не понятна логика такого поведения браузеров. Если есть margin у дива, расположенного внутри другого дива, то это должно означать, что должен быть отступ внутри внешнего дива. За внешний див, надо полагать, выйти никак невозможно. Как это можно исправить и в чём здесь ошибка?

Как с помощью margin-top можно опустить текст "NAME OF SITE" ниже. padding-top я не рассматриваю, так как хочу понять, как такое надо делать при помощи margin

Вот код для наглядности.

<!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" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css" media="all">
* {
   padding:0; margin:0;
}

html, body, div, p, span, a, table, tbody, tr, td, label, img {
   border:0;
}

body {
   background-color:#ccc;
}

#main {
   min-width:1007px;
   background-color:transparent;
   overflow:auto;
}

#top { 
   height:107px;
   background:olive;
   min-width:1007px;
}
#up1 {
   height:81px;
   background:red;
}

.title {margin-top:20px; font-weight:bold;}

</style>
</head>
<body>
   <div id="main">
	  <div id="top">
			 <div id="up1">

				   <div class="title">NAME OF SITE</div> <!--  Этот див имеет margin-top:20px; -->
			 </div>
	  </div>
   </div>
</body>
</html>

скачать страницу можно также перейдя по ссылке: http://ifolder.ru/17880666

Edited May 26, 2010 by clavin

d0ublezer0 · May 26, 2010

#up1  {
background:red;
height:81px;
overflow:hidden;
}

Edited May 27, 2010 by d0ublezer0

clavin · May 26, 2010

#up1  {
background:red;
height:81px;
overflow:hidden;

Я прихожу к выводу, что для любого дива, у которого задано свойство height, надо ставить свойство overflow:hidden; Иначе можно получить непредсказуемые результаты.

psywalker · May 26, 2010

Я прихожу к выводу, что для любого дива, у которого задано свойство height, надо ставить свойство overflow:hidden; Иначе можно получить непредсказуемые результаты.

Если хорошо знать своё дело, то неожиданностей быть не должно. А бездумно вешать свойства и не понимать, почему оно так работает, это не самый лучший вариант.

Mytis · May 1, 2011

И все-таки мне интересен ответ на этот вопрос, поскольку я сам не нашел корректного решения этой задачи. Сколько помню статьи о блоковой модели мистера Мержевича, я не разу не видел ни в одной книге этого автора упоминание о том, что дочерний элемент, имея смещение вниз смещает и элемент-родитель. Может это какая-то крутая шутка разработчиков браузеров, которую мне, школяру не понять?



<div>

    <div>

         <h1 style="margin-top: 20px;">Текст</h1>

    </div>

</div>

и этот код, отрабатывается корректно в IE8, несмотря на всеобщее понятие об убогости этого браузера. В Opera, Safari, FF, GC отступ не только смещает слой на ступень выше, но и самый верхний слой. Если добавить отступ слою, в который непосредственно вмещен тег H1, то история повторится. Господа профессионалы, развейте мое недоразумение, я в замешательстве

Решить проблему можно, растянув над надписью невидимое изображение на необходимый отступ, но это же смешно...

P.S. Как говорит psywalker, лепнина - дело неразумное. Полностью согласен, не хочу быть "водилой", хочу верстать грамотно, по сему и вопрос задаю

Edited May 1, 2011 by Mytis

psywalker · May 1, 2011

Может это развеет твои вопросы?

http://reference.sitepoint.com/css/collapsingmargins

Mytis · May 1, 2011

Хитроумные комбинации

а главное как все обставлено: раз overflow: hidden, то пусть себе съезжает вниз сколько влезет

psywalker, спасибо за ссылку, развеяло недоразумения

Temiks · May 1, 2011

а чем padding не устраивает?

Edited May 1, 2011 by Temiks

psywalker · May 1, 2011

psywalker, спасибо за ссылку, развеяло недоразумения

Ну и здорово!

а чем padding не устраивает?

А при чём тут паддинг? Рассказ вроде не об этом?

Temiks · May 1, 2011

psywalker

padding-top я не рассматриваю

psywalker · May 1, 2011

psywalker
padding-top я не рассматриваю

Ну всё правильно. Речь шла именно о марджинах, так как именно с ними связана конкретная проблема. Паддинги тут не в теме.

Mytis · May 1, 2011

Не самое лучшее решение - если не работает одно, использовать другое.

Честно, может я и не особо понимаю суть дела, но мне непонятно почему создаются такие браузеры. Естественно, что ни делается - делается ради денег, но как можно заработать, делая какую-то...некондицию что-ли. IE на этом фоне просто законопослушный гражданин

psywalker · May 1, 2011

Не самое лучшее решение - если не работает одно, использовать другое.
Честно, может я и не особо понимаю суть дела, но мне непонятно почему создаются такие браузеры. Естественно, что ни делается - делается ради денег, но как можно заработать, делая какую-то...некондицию что-ли. IE на этом фоне просто законопослушный гражданин

Что ты имеешь ввиду? Если ты про выпадение марджинов, то это вполне правильное поведение браузеров. Всё по спецификации верно. О чём речь дружище, какие браузеры тебя смущают?

Mytis · May 2, 2011

Вполне одинаковое поведение наблюдается у всех кроме IE. Он почему-то интерпретирует все отступы именно так, как я и предполагаю изначально. Ну вот есть отступ сверху на 5 пикселов - он 5 и сделает. Родительский элемент на месте останется. Я вижу это наиболее целесообразным решением со стороны браузера - никаких необъяснимых ситуаций. IE совершенно не волнует, что и как получится в итоге - он делает точно то, что задет человек. И все тут. Пока считаю именно его наиболее правильным (хоть и не поддерживает многие удобные параметры CSS),но вероятнее всего, я пока мало работаю в области верстки, и плохо знаю особенности браузеров (судить могу поверхностно, думаю, со временем пойму)

Edited May 2, 2011 by Mytis

psywalker · May 2, 2011

Вполне одинаковое поведение наблюдается у всех кроме IE. Он почему-то интерпретирует все отступы именно так, как я и предполагаю изначально. Ну вот есть отступ сверху на 5 пикселов - он 5 и сделает. Родительский элемент на месте останется. Я вижу это наиболее целесообразным решением со стороны браузера - никаких необъяснимых ситуаций. IE совершенно не волнует, что и как получится в итоге - он делает точно то, что задет человек. И все тут. Пока считаю именно его наиболее правильным (хоть и не поддерживает многие удобные параметры CSS),но вероятнее всего, я пока мало работаю в области верстки, и плохо знаю особенности браузеров (судить могу поверхностно, думаю, со временем пойму)

Как раз таки ИЕ делает неправильно. Он много чего не делает так как нужно и этот случай тоже к нему относится. Так что, да, тут дело в опыте, со временем придёт понимание, обязательно.

Sign In

margin-top у дива внутри другого дива

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information