Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
1

схлопывающиеся отступы для body

21.05.2012, 14:53. Просмотров 1738. Ответов 16
Метки нет (Все метки)

если внутрь body поместить див c margin-top, то для body сверху тоже появится отступ. как этого избежать?
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.05.2012, 14:53
Ответы с готовыми решениями:

Почему правило берется из body.site.fluid а не из body?
Есть 2 файла css: <link...

Для чего указывать ширину и высоту для html body?
Что означает, если указать в CSS свойство: html, body { width: 100%; height: 100%;...

В чем логика установки разных размеров шрифтов для html и для body?
Почему в Bootstrap для тега html установлен font-size: 10px; а для тега body 14px? Не пойму в...

Background для Body
Добый день. У меня есть CSS файл, в котором описан Background для Body. Но проблема в том, что...

Не работает width для body
Здравствуйте. Почему когда я задаю width:700px; для body, нечего не происходит хотя по идее весь...

16
gulliver
Нарушитель
86 / 86 / 9
Регистрация: 09.05.2012
Сообщений: 456
21.05.2012, 15:04 2
Heleg, так margin-top ты делаешь внешний отступы,если див в боди то будет отступ у боди...
или я что то не понял тебя
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
21.05.2012, 15:12  [ТС] 3
кот:
HTML5
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
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>index</title>
    <style type="text/css" media="screen">
        * {
            border: 0;
            padding: 0;
            margin: 0;
            outline: 0;
        }
        
        html {
            width: 100%;
            height: 100%;
        }
        
        body {
            background: #cccccc;
            outline: 1px solid red;
        }
        
        div {
            width: 300px;
            height: 300px;
            background: green;
            margin: 10px;
        }
        
    </style>
</head>
<body>
    
    <div>
        
    </div>
    
</body>
</html>
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
21.05.2012, 15:13  [ТС] 4
шкрин
0
Изображения
Тип файла: png Picture 1.png (6.5 Кб, 20 просмотров)
21.05.2012, 15:13
Sergio Aguero
451 / 442 / 21
Регистрация: 11.04.2012
Сообщений: 2,076
21.05.2012, 15:27 5
CSS
1
2
3
4
5
body {
        
margin:0;
padding:0;
        }
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
21.05.2012, 15:32  [ТС] 6
Sergio Aguero,
Цитата Сообщение от Heleg Посмотреть сообщение
* {
border: 0;
padding: 0;
margin: 0;
outline: 0;
}
0
Sergio Aguero
451 / 442 / 21
Регистрация: 11.04.2012
Сообщений: 2,076
21.05.2012, 15:38 7
пропиши внутренний стиль для боди
HTML5
1
2
<body   style="margin:0;
padding:0;">
0
gulliver
Нарушитель
86 / 86 / 9
Регистрация: 09.05.2012
Сообщений: 456
21.05.2012, 15:49 8
че то я придумал . отступ у боду пропал ^^

CSS
1
2
3
4
5
body {
            background: #cccccc;
           // outline: 1px solid red;
           position:fixed;
        }
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
21.05.2012, 15:57  [ТС] 9
Цитата Сообщение от Sergio Aguero Посмотреть сообщение
пропиши внутренний стиль для боди
накой?

Добавлено через 1 минуту
Цитата Сообщение от gulliver Посмотреть сообщение
position:fixed;
да, это известно. схлопывание можно убрать тремя способами, мне известным:
- задать padding,
- float,
- спозиционировать элемент.
все эти методы – хуже не придумаешь
0
gulliver
Нарушитель
86 / 86 / 9
Регистрация: 09.05.2012
Сообщений: 456
21.05.2012, 16:00 10
ну мне кажется выдумывать велосипед не лучший способ ^^
Хотя тоже стало интересно) есть ли еще способ
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
21.05.2012, 16:18  [ТС] 11
position – плохой способ. это велосипед с квадратными колесами. так что нужен нормальный способ
0
Sergio Aguero
451 / 442 / 21
Регистрация: 11.04.2012
Сообщений: 2,076
21.05.2012, 16:20 12
нето написал я
0
gulliver
Нарушитель
86 / 86 / 9
Регистрация: 09.05.2012
Сообщений: 456
21.05.2012, 16:21 13
float's тоже не нравится ^^

Надо подумать, может кто нибудь предложить что нибудь интересное...
Самого заинтересовало
0
justed
4 / 4 / 0
Регистрация: 24.10.2011
Сообщений: 14
21.05.2012, 18:17 14
Цитата Сообщение от Heleg Посмотреть сообщение
кот:
HTML5
1
body {background: #cccccc;outline: 1px solid red; }
Если outline заменить на border то произойдет чудо. Может какие то особенности в спецификации.
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
22.05.2012, 08:32  [ТС] 15
justed, это то понятно. только вот outline тут только для примера
0
Alorian
691 / 531 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
22.05.2012, 08:45 16
Цитата Сообщение от Heleg Посмотреть сообщение
если внутрь body поместить див c margin-top, то для body сверху тоже появится отступ. как этого избежать?
Сделать padding-top у body равный margin-top у дива.
0
justed
4 / 4 / 0
Регистрация: 24.10.2011
Сообщений: 14
22.05.2012, 11:52 17
и правда, чем плох padding?
схлопывание логично, т.к. первым в body идет наш div. Если после открытия body добавить хотя бы пустой блок высотой в 1px то схлапывания уже не будет.
HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>index</title>
    <style type="text/css" media="screen">
        * {
            border: 0;
            padding: 0;
            margin: 0;
            outline: 0;
        }
        
        html {
            width: 100%;
            height: 100%;
            background: #000;
        }
        
        body {
            background: #cccccc;
        }
        
        div {
            width: 300px;
            height: 300px;
            background: green;
            margin: 10px;
        }
        span {
            display: block;
            height: 1px;
        }
        
    </style>
</head>
<body>
    <span></span>
    <div>
        
    </div>
    
</body>
</html>
0
22.05.2012, 11:52
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.05.2012, 11:52

Отступы для блока
Приветствую. Существует блок div, внутри которого еще один блок с тремя столбцами. Как сделать...

Разный body для разных классов
приветствую, имеется общий body, но есть также дополнительный body(в другом файле), который задает...

Отступы для всей таблицы
Есть вот такая ситуация: Нужно на определенном фоне сделать таблицу меньшего размера. В таблице...


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

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

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