DWWEB.RU
СКРИПТЫ

Margin css применение примеры

2019/10/12 Марат 96 0 CSS |

Если вы хотите узнать теорию о margin , то вы всегда найдете её о свойстве margin в css в любом учебнике! Наша задача не в том, чтобы пересказать учебник, а рассказать именно так, чтобы было понятно, что именно означает margin!

Единственное, что нужно запомнить – margin – это отступ снаружи!

Чем отличается margin от padding?

Margin – это отступ снаружи блока, а padding внутри. Но об этом мы как-то поговорим в следующий раз – сегодня margin, все о margin, использования и примеры применения margin и все это проиллюстрируем на примерах – чтобы было понятно, что к чему!

Для этого нам понадобится какой-то блок на всю ширину нашей страницы, чтобы его увидеть добавим ему бордюр, установим высоту, ну к примеру, 300px.

width: 100%;

height: 200px;

border: 1px solid black;

И во внутрь поместим другой блок с текстом, что это наш блок.

width: 100px;

height: 20px;

border: 1px solid red;

И получим два блока, один внутри другого:

<div style="width: 100%; height: 200px; border: 1px solid black;">

<div style="width: 100px; height: 20px; border: 1px solid red;">Наш блок.</div>

</div>

Результат:

Наш блок.

Чем отличаются margin и => margin-top, margin-bottom, margin-left, margin-right

Нам немного нужно разобраться в перечисленных в заголовке 5 вариантов использования margin.

Просто запоминаем, а понимание придет потом!

margin-top: 20px; = margin: 20px 0 0 0;
margin-right: 20px; = margin: 0 20px 0 0;
margin-bottom: 20px; = margin: 0 0 20px 0;
margin-left: 20px; = margin: 0 0 0 20px;

    Применение margin: положительный margin-top

  1. Теперь к нашему блоку, прибавим положительное число - margin-top: 20px;
  2. Наш блок.

    Применение margin: отрицательный margin-top

    Если выше мы применяли к блоку margin-top положительное число, теперь добавим... отрицательное число - margin-top: -20px;


    Наш блок.

    Вывод об использовании положительного и отрицательного margin-top

    Думаю. что здесь вывод никакой вам не нужен! И так все понятно!

    Применение margin: положительный margin-right

  3. К margin-right добавим положительное число - margin-right: 20px;
  4. Наш блок.

    Применение margin: отрицательный margin-right

    К margin-right прибавим отрицательное число - margin-right: -20px;


    Наш блок.

    НЕ вывод, вопрос - почему margin-right не работает!?

    В данной ситуации, margin-right - и никак не должен был сработать! Почему!? По умолчанию, точка отсчета берется верхний левый угол! Если совсем тупо - то правая сторона этой ситуации, никак не будет работать!

    НО! В качестве бонуса

    Если мы переместим вправо наш блок с помощь свойства float, то увидим совершенно другую ситуацию:

    Положительный margin-right и float:right;

    <div style="width: 100%; height: 200px; border: 1px solid black;">

    <div style="width: 100px; height: 20px; border: 1px solid red; margin-right: 20px; float:right;">Наш блок.</div>

    </div>

    margin-right: 20px; float:right;

    Наш блок.

    Отрицательный margin-right и float:right;

    margin-right: -20px; float:right;


    Наш блок.
    Вывод нужен!?

    Применение margin: положительный margin-bottom

  5. margin-bottom положительное число - margin-bottom: 20px;
  6. Наш блок.

    Применение margin: отрицательный margin-bottom

    margin-bottom... отрицательное число - margin-bottom: -20px;


    Наш блок.

    Вопрос опять! - почему margin-bottom никак не сработал!?

    Ответ точно такой же, что и в пункте 2.

    НО!

    В качестве бонуса : если к примеру вовнутрь блока поставим два наших блока без margin

    <div style="width: 100%; height: 200px; border: 1px solid black;">

    <div style="width: 100px; height: 20px; border: 1px solid red; ">Наш блок.</div>

    <div style="width: 100px; height: 20px; border: 1px solid red; ">Наш блок №2.</div>

    </div>

    Получим:
    Наш блок.
    Наш блок.

    Как видим...наши блоки прилепились друг к другу...

    И если сейчас мы добавим к первому блоку margin-bottom: 20px;

    <div style="width: 100%; height: 200px; border: 1px solid black;">

    <div style="width: 100px; height: 20px; border: 1px solid red; margin-bottom: 20px; ">Наш блок.</div>

    <div style="width: 100px; height: 20px; border: 1px solid red; ">Наш блок №2.</div>

    </div>

    То получим:
    Наш блок.
    Наш блок.
    Какой вывод напрашивается!?

    Что для того, чтобы margin-bottom и margin-right сработали, нужны определенные условия!

    Применение margin: положительный margin-left

  7. margin-left - положительное число - margin-left: 20px;
  8. Наш блок.

    Применение margin: отрицательный margin-left

    margin-left... отрицательное число - margin-left: -20px;


    Наш блок.

    Вывод о margin-left

    Вывод здесь на лицо...

    О margin вообще

    Свойство margin помогает позиционировать блоки внутри других боков и относительно друг-друга!

    Если никаких препятствий справа и снизу нет, то соответствующие свойства - работать не будут.

    Если же рядом справа и снизу блок будет, то margin-bottom и margin-right будут срабатывать...

Надеюсь рассказал доступно...

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
margin csscss правило margincss margin за что отвечаетза что отвечает css правило marginhtml css marginmargin top cssmargin csstext margin csscss body marginmargin bottom cssmargin left cssmargin right csscss min margincss margin по центруcss margin centercss margin не работаетcss margin по центруcss margin centercss border margincss margin не работаетmargin div csscss padding margin отличиеposition margin csscss отрицательные marginсвойство margin в csscss margin выравнивание по центруcss max marginчто означает css правило marginmargin left text css

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019