Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.10.2016, 18:45   #1
S_emik
Новичок
Джуниор
 
Регистрация: 24.10.2016
Сообщений: 2
По умолчанию Свойства bottom и margin-bottom

Здравствуйте уважаемые читатели. В процессе применения каскадных таблиц стилей у меня возник такой вопрос:
в чём разница между свойствами bottom и margin-bottom при относительном позиционировании?
Если написал ерунду, то заранее извиняюсь.
S_emik вне форума Ответить с цитированием
Старый 24.10.2016, 19:01   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Нет, вопрос на самом деле интересный. Я точно сказать не могу.
Думаю что так сложилось исторически.
А на самом деле они будут указывать на одно свойство.
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/

Последний раз редактировалось pompiduskus; 24.10.2016 в 19:52.
pompiduskus вне форума Ответить с цитированием
Старый 24.10.2016, 19:08   #3
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Ради эксперимента.

поведение елементов, абсолютно одинаковое. по крайней мере в этой просто моделе.

И конечно, если убрать относительное позиционирование, то "bottom; 10px;" больше вообще не имеет "силы", и просто игнорируется

Код:
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8"/>
    <title></title>

    <style type="text/css">

        #_bottom{
            position: relative; width: 100%; height: 100px; display: block; background-color: #F00;
            bottom: 10px;
        }

        #_margin_bottom{
            position: relative; width: 100%; height: 100px; display: block; background-color: #0F0;
            margin-bottom: 10px;

        }

        #_free_div{
            position: relative; width: 100%; height: 100px; display: block; background-color: #00F;
        }

    </style>

</head>
<body>

    <div id="_bottom"></div>
    <div id="_margin_bottom"></div>
    <div id="_free_div"></div>

</body>
</html>
Вот оказывается у них все же есть различия.
И к тому-же <<If "position:static", the bottom property has no effect.>>
Код:
// http://www.w3schools.com/cssref/pr_pos_bottom.asp
bottom: auto|length|initial|inherit;
bottom: initial; // << == Default value: 	auto

В то время как

Код:
// http://www.w3schools.com/cssref/pr_margin-bottom.asp
margin-bottom: length|auto|initial|inherit;
bottom: initial; // << == Default value: 	0
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/

Последний раз редактировалось pompiduskus; 24.10.2016 в 19:52.
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Margin не могу настроить headWoW Помощь студентам 1 09.08.2016 14:33
HTML margin sir.andrey Помощь студентам 0 20.11.2012 11:33
Меню: display: block, padding-top и bottom keen_ HTML и CSS 0 17.03.2012 09:36
css margin DrStrangeLove HTML и CSS 4 11.03.2011 03:51