Css довідник

Властивість CSS margin-left використовується для вказівки розміру лівого зовнішнього поля елемента, яке знаходиться за лівої кордоном його рамки (border-left). На відміну від лівого внутрішнього відступу (padding-left), колір поля завжди прозорий, тому крізь нього просвічується фон навколишнього контексту.

Розташування лівого поля - margin-left

Css довідник

Якщо необхідно вказати розмір полів відразу з усіх боків елемента, то можна використовувати властивість margin. Також в описі цього властивості рекомендую вам ознайомитися про поняття злиття полів елементів.

Тип властивості

Значенням властивості margin-left є вказівка ​​розміру лівого поля елемента одним із таких способів:

  • Розмір - відстань в відносних або абсолютних одиницях виміру прийнятих в CSS, наприклад: пікселі (px), пункти (pt), сантиметри (cm) і т.д. Допускаються негативні значення.
  • Відсотки - відстань у відсотках (%), де за 100% береться ширина елемента-предка за наступним алгоритмом:
    1. Для непозіціоніруемих і щодо позиціонуються (position. Static або relative) розрахунок полів йде щодо ширини найближчого блочного (block) елемента-предка, вбудованого блоку (inline-block) або елементи таблиці, а якщо таких немає, то ширини тіла документа ( ).
    2. Процентний розмір полів самого тіла документа вважається відносно ширини кореневого елемента ( ).
    3. Для елементів з position. fixed поля вважаються щодо ширини вікна браузера.
    4. Для елементів з position. absolute поля вважаються щодо ширини елемента, від якого йде позиціонування, причому з урахуванням його внутрішніх відступів (padding), а якщо такого елемента немає, то щодо ширини вікна браузера.
    Допускається вказувати негативні процентні значення.
  • auto - розмір поля розраховується браузером автоматично виходячи з доступного простору зліва від елемента.
  • inherit - успадковує значення margin-left від батьківського елемента.

Відсоткова запис: щодо ширини елемента-предка або вікна браузера.

Значення за замовчуванням: в специфікації ноль (0), але насправді у деяких HTML-елементів браузери спочатку встановлюють певний розмір полів. Наприклад, у

присутні ненульові поля зліва і справа.

margin-left: розмір | відсотки | auto | inherit

Приклад CSS: використання margin-left

Результат. Використання властивості CSS margin-left.

Css довідник

Зверніть увагу, що в даному прикладі верхні поля блоків злилися, так як у них не встановлені рамки (border) і внутрішні відступи (padding).

версії CSS

Internet Explorer 6.0 і 7.0 не розуміють значення inherit і в деяких випадках неправильно вважають ліве поле абсолютно позиціонуються, коли margin-left: auto.

Крім цього IE 6.0 неправильно розраховує процентні значення margin-left. а також завжди подвоює його значення для спливаючого вліво елемента. Дану помилку можна виправити, застосувавши до плаваючого елементу display: inline.

  • Як зробити сайт
    Самому безкоштовно
  • Підручник HTML
    Для початківців
  • Підручник CSS
    Для новаків
  • Довідники
    За HTML і CSS
  • приклади
    HTML і CSS
  • посилання
    Корисні сайти для веб-майстрів
  • інструментарій
    Програми для створення сайтів

CSS за алфавітом

CSS за призначенням