Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.72/53: Рейтинг темы: голосов - 53, средняя оценка - 4.72
qw3qw3qw3r
4 / 4 / 1
Регистрация: 18.02.2010
Сообщений: 195
1

Не могу понять почему не работает margin

02.03.2012, 11:37. Просмотров 10009. Ответов 2
Метки нет (Все метки)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>zgdk.ru</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="header">
    <div id="logo">&nbsp;</div>
</div>
<div id="content">&nbsp;</div>
<div id="footer">&nbsp;</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body {
    background-color:#9b9b9b;
}
 
#header {
    height:250px;
    background-color:#231f20;
}
 
#logo {
    width:300px;
    height:129px;
    margin-left:5%;
    margin-top:100px;
    background-color:#ffffff;
    background-repeat:no-repeat;
}
 
#content {
    background-color:#ffffff;
    margin:0 auto;
    width:80%;
    height:100%;
}
 
#footer {
    height:50px;
    background-color:#231f20;
}
Почему выделеный margin-top в #logo делает отступ как будто я его написал в header?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.03.2012, 11:37
Ответы с готовыми решениями:

Не могу понять, почему не работает
Не могу понять, почему не не рабоате background, путь к изображению прописал...

Почему не работает margin
&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...

Почему при указании float не работает margin
Почему при float не работает margin 0 auto

CSS Не работает margin-top/margin-left в IE, Firefox
Добрый день! Проблема в коде CSS .check &gt; span{ ...

Margin-top и margin-bottom в ie6 не работает
#news1 &gt; p { margin-top:15px; margin-bottom:15px; } пробовал ставить...

2
Jallik Lich
Исследователь
195 / 174 / 13
Регистрация: 30.10.2011
Сообщений: 605
02.03.2012, 12:18 2
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>zgdk.ru</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="header">
        <div id="logo">&nbsp;</div>
</div>
<div id="content">&nbsp;</div>
<div id="footer">&nbsp;</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
        background-color:#9b9b9b;
}
 
#header {
        height:250px;
        background-color:#231f20;
    position: relative;
}
 
#logo {
        width:300px;
        height:129px;
        margin-left:5%;
        margin-top:100px;
        background-color:#ffffff;
        background-repeat:no-repeat;
    position: absolute;
}
 
#content {
        background-color:#ffffff;
        margin:0 auto;
        width:80%;
        height:100%;
}
 
#footer {
        height:50px;
        background-color:#231f20;
}
0
Серёга Кольт
5 / 5 / 2
Регистрация: 02.03.2012
Сообщений: 11
02.03.2012, 14:39 3
Потому что margin - это внешний отступ. И предназначен он в первую очередь для того, что бы делать отступы между соседними блоками, а ни между родителем и дочерним селектором.
Шапка получается пропускает внешний отступ. Т.е. он выходит за пределы блока шапки. И таким образом опускается и она.

Как вариант либо то, что предложили в посте выше, либо использовать свойство padding вместо margin, но только учти, что оно влияет на размер блока к которому прописано.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.03.2012, 14:39

Не могу понять почему
код вроде правильный а страничка не открываеться &lt;html&gt; &lt;head&gt;...

Не могу понять почему не растягиваеться footer
При просмотре своего сайта при разных разрешениях столкнулся с трудностью,...

Не могу понять, почему одна картинка уезжает
#knopka{ width:300px; height:100px; } #ugolkrug1,#ugolkrug2,#ugolkrug3 {...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru