Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Margin css применение примеры Наружный отступ блока 'Margin'

Поддержи проект!!! smile

О margin , 4 варианта использования margin: margin-top, margin-right, margin-bottom, margin-left. Примеры использования наружного доступа блока с примерами! Много примеров! И много скриншотов с отступами.

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

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

Margin – это отступ снаружи блока, а padding внутри.

Наружный отступ блока свойство "margin"

  1. Что такое margin
  2. Использование margin
  3. Свойство margin = "0"
  4. Пример использования margin-top
  5. Пример использования margin-right
  6. Пример использования margin-bottom
  7. Пример использования margin-left
  8. Еще о margin
  1. Что такое margin, использование margin

    Свойство margin - это наружный отступ блока. Если у блока margin отсутствует, то мы увидим вот такую картину:

    Что мы вообще здесь, по этой картинке можем сказать!? Что у этого блока, нет никаких свойств, кроме свойств высоты и ширины.

    Что такое margin, использование margin

    Как узнать margin блока через браузер.

    Иногда(вренее очень часто), если вы имеете дело к сайту. то вам рано или поздно придется смотреть на свой сайт в браузере, и в том числе вам потребуется увеличить или уменьшить margin, либо просто посмотреть значение свойства margin для данного блока!

    Как его(margin) можно посмотреть в браузере!?

    Нажимаем ПКМ по выбранному объекту, пусть это будет первый пункт в котором мы сейчас пишем.

    В выпавшем окне ищем строчку - исследовать элемент(строка, в разных браузерах отличается, мы смотрим в яндекс браузере.).

    Когда слева вы наводите наш блок, в данном случае "<li>", сверху он сразу выделяется цветом.

    Если у данного блока есть свойства, то справа мы увидим их , в данном случае "margin-left: 30px;"

    Если мы опустимся ниже, то увидим схему нашего блока, где также будем наблюдать margin слева.

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Как узнать margin блока через браузер.

  2. Использование margin

    Margin используется двумя

    1). Использование "Margin" внутри атрибута style

    Один из способов использования margin - это использование "margin" внутри атрибута style:
    Html:

    <div style="border:1px solid black;">

    <div style="border:1px solid red; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; ">Здесь текст</div>

    </div>

    Результат использования "Margin"

    Здесь текст

    Выше я привел пример, конечно, так никто не пишет, но как пример. На самом деле я записал бы так:

    Html:

    <div style="border:1px solid black;">

    <div style="border:1px solid red;margin: 20px;">Здесь текст</div>

    </div>

    Результат использования "Margin"

    Здесь текст

    2). Использование "Margin" внутри тега style и класса

    Используем прямо здесь на странице тег style + class
    Тег style и class

    <style>.example {border:1px solid red;margin: 20px;}</style>

    Html:

    Внутрь второго дива вставляем класс "example" :

    <div style="border:1px solid black;">

    <div class="example">Здесь текст</div>

    </div>

    Результат использования "Margin"

    Результат аналогичный...

    Здесь текст

    3). Использование "Margin" внутри файла css и класса

    Еще один вариант использования margin:

    Нам нужен файл css

    Внутри файла, записываем class :

    .example {border:1px solid red;margin: 20px;}
    Html:

    Код "Html" аналогичный, что в предыдущем абзаце...

    <div style="border:1px solid black;">

    <div class="example">Здесь текст</div>

    </div>

    Результат использования "Margin"

    Результат аналогичный...

    Чем отличаются 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;

  3. Свойство margin = "0"

    Начнем изучение margin, когда margin = "0" или вообще отсутствует!

    Для этого нам понадобится какой-то блок на всю ширину нашей страницы, чтобы его увидеть добавим ему бордюр, установим высоту, ну к примеру, 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>

    Результат:

    Наш блок.

  4. Пример использования margin-top

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

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

    Наш блок.

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

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


    Наш блок.

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

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

  5. Пример использования margin-right

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

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

    Наш блок.

    Применение 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;

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

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

    margin-bottom положительное число - margin-bottom: 20px;

    Наш блок.

    Применение 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 сработали, нужны определенные условия!

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

    margin-left - положительное число - margin-left: 20px;

    Наш блок.

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

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

    Наш блок.

  8. Еще о margin - поисковые запросы:

    margin тег на примере

    Вопрос из интернета - "margin тег на примере". А примеры - вся страница состоит из примеров.

    margin - не является тегом! Margin - это свойство!

    Вывод о margin-left

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

    О margin вообще

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

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

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

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


Вас может еще заинтересовать список тем : #CSS | #CSS_PROPERTY |
Последняя дата редактирования : 20.12.2020 08:37
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
margin css css правило margin css margin за что отвечает за что отвечает css правило margin html css margin margin top css margin css text margin css css body margin margin bottom css margin left css margin right css css min margin css margin по центру css margin center css margin не работает css margin по центру css margin center css border margin css margin не работает margin div css css padding margin отличие position margin css css отрицательные margin свойство margin в css css margin выравнивание по центру css max margin что означает css правило margin margin left text css тег маргин примеры применения

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.