Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Верстка div, странный эффект

Автор: lerguide 27.6.2010, 00:02

Нужна помощь. Я не разбираюсь в верстке, но понадобилось кое-что сделать. И вот один прием у меня не работает. Почему - я уже голову сломал.
Дано четыре слоя: подложка, серый, темно-серый, светлый и самый внутренний (inner - черный пунктир). От подложки все наследуют высоту. Кроме иннера - у него высота 30 и верхнее поле 15. Так вот из-за этого поля, слой, в котором содержится иннер (светлый) смещается на 15 пикселей вниз! Еще больше удивительно, что этого не происходит, если у него (у светлого) есть граница.
Вопрос: почему это происходит? Как устранить эту проблему?
http://ipicture.ru/

Код


<html>
<style type="text/css" madia="all">
.layer0{
    border: 1px solid #000;
    margin-top: 20px;
    height: 100px;
}

.layerL{
    border: 1px solid #000;
    height: inherit;
    padding-left: 20px;
    background: #999;
}

.layerR{
    border: 1px solid #000;
    height: inherit;
    padding-right: 20px;
    background: #777;
}

.layerC{
    /*border: 1px solid #000;*/
    height: inherit;
    background: url(1.png);
}

.layerInner{
    border: dashed 1px #000;
    margin: 15px 0 0 0;
    height: 30px;
}
</style>
<body>

<div class="layer0">
    <div class="layerL">
        <div class="layerR">
            <div class="layerC">
                <div class="layerInner">
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Пояснение для чего это надо.
Первый слой - плашка для контента. Вторым, третьим и четвертым создаем бекграунд для правого угла, левого угла и для центральной области соответсвенно. В пятом - иннере - непосредственно сам контент. Положение этого слоя мы корректируем при помощи поля в 15 пикселей от верха. При этом все слои накладываются и перекрывают друг друга полностью (ну, за исключением иннера). Наверняка можно сделать по другому, но я так замучился, что это уже дело принципа.

Автор: lerguide 27.6.2010, 00:23

Да, проблема решается паддингом вместо маргина. Но почему с маргином проблема?

Автор: blah 27.6.2010, 13:39

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

Если это ни о чем не скажет, просто замените бордер на overflow:hidden