В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
css (131)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

О 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 сработали, нужны определенные условия! Их может быть не 1, например position absolute...


  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 будут срабатывать...

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

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.027744 секунд. Подробнее