margin-top - SEO форум MaulTalk.com

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

margin-top

Опции

artylion

Topic Starter сообщение

11.4.2010, 12:56; Ответить: artylion

Сообщение #1

Группа: User
Сообщений: 24
Регистрация: 22.11.2009
Поблагодарили: 0 раз
Репутация:

Согласно описанию:
http://www.htmlbook.ru/css/margin.html

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента

Собственно вопрос: почему в примере ниже красный блок отступает не от родительского элемента (блок content), а от header?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="title" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

img {
    border: none;
}
input {vertical-align: middle}
#wrapper {
    width: 600px;
    margin: 0 auto;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 100px;
    background: #FFE680;
}

/* Middle
-----------------------------------------------------------------------------*/
#content {background: #eee;
}
#block {width: 200px;
        height: 100px;
        background: red;
        margin: 0 auto;
        margin-top: 10px;}

#content p {background: #ccc;
            margin: 10px;}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 50px;
    background: #BFF08E;
}
        </style>
</head>

<body>

<div id="wrapper">

    <div id="header">
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent

dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac

diam. Etiam neque. zx./11:36 11.04.2010
    </div>

    <div id="content"><div id="block"></div>
<p>Content: Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu,

aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque

vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae,

ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit.</p>
<p>Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui

ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi

tempor pulvinar pede. Donec vel elit.</p>
    </div>

    <div id="footer">
Footer: Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at

cursus dolor vestibulum neque enim.
    </div>

</div>

</body>
</html>

Ответить с цитированием данного сообщения

Arks

11.4.2010, 21:50; Ответить: Arks

Сообщение #2

Группа: User
Сообщений: 2780
Регистрация: 20.3.2010
Поблагодарили: 0 раз
Репутация:

Потому что:

#block {background:none repeat scroll 0 0 red;height:100px;margin:10px auto 0;width:200px;} (строка 52)
* {margin:0;padding:0;} (строка 12)

унаследовано от body

body {font:12px/18px Arial,Tahoma,Verdana,sans-serif;} (строка 16)

Чего все такие ленивые?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Burzh.top\|Партнерская программа под любой вид трафика (email, спам, УБТ)	2	cryptius	767	16.4.2024, 17:50 автор: cryptius
80%\|SatoshiAff.top\|Биткоин партнерка	1	SatoshiAff	666	7.4.2024, 15:20 автор: kuprum
Обзор на личном опыте на партнерку Pirozhki.top	3	LeoMast	2156	21.11.2021, 22:19 автор: kuprum
cerber.top-На страже вашего профита! Повышеные цены на выкуп!100% отчислений по РЕВШАРЕ!!	16	cerbertop	6404	10.9.2019, 13:00 автор: cerbertop
Top.Partners - VIP условия по WAPCLICK и WEB MT для всех	113	Top.Partners	14007	7.8.2018, 14:51 автор: -Top.Partners-

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 24.4.2024, 23:06

Дизайн