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

Наружный отступ блока '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 будут срабатывать...

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


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

Подписаться + =
Теги:
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тег маргин примеры применения

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.