Как изменить цвет margin - Исправление ошибок и поиск оптимальных решений проблем

I want to color the margins and padding of a <div> so that I can use it educationally to represent the box-model in CSS. How can I set a color for those elements?

asked Dec 17, 2014 at 16:38

The property that you are looking for is background-clip

div {
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 30px solid transparent;
    background-color: blue;
}
.test1 {background-clip: content-box;}
.test2 {background-clip: padding-box;}
.test3 {background-clip: border-box;}

<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>

And another solution, combining both in a single div

div {
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 30px solid transparent;
    background-image: linear-gradient(0deg, yellow, yellow), 
                      linear-gradient(0deg, green, green), 
                      linear-gradient(0deg, blue, blue);
    background-clip: content-box, padding-box, border-box;
}

<div></div>

answered Dec 17, 2014 at 18:58

valsvals

60.1k11 gold badges85 silver badges136 bronze badges

It’s not possible to set the background-colors of the padding and margin attributes. They are meant to be transparent, or invisible, and used solely for positioning purposes.

However, I have heard this question many times, and I completely understand wanting to show the padding and margins for purely educational purposes. Therefore, I have created a simple little «hack» to represent the box-model, using CSS’s :before and :after psuedo-elements.

You can’t color padding, or margins, but let me suggest a little hack to make it look like you can (without JavaScript!):

simulated box-model:

#box {
  width: 150px;
  height: 150px;
  background: green;
  position: relative;
  border: 10px solid blue;
  left: 50px;
  top: 50px;
}
#box:before {
  background: red;
  content: 'border';
  display: block;
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  z-index: -1;
}
#box:after {
  background: gray;
  content: 'margin';
  display: block;
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  z-index: -2;
}

<div id="box">#box</div>

answered Dec 17, 2014 at 16:38

DrazzahDrazzah

7,5417 gold badges33 silver badges57 bronze badges

Источник

Introduction to CSS Margin Color

The following article provides an outline on CSS Margin Color. The margin property in HTML gives space around the outermost element’s content of the box-like structure. Margin is creating space beyond the box model elements. So, we cannot apply color to the margin. If our requirement still applies color around the elements, instead of margin you can use padding.

The padding property in html gives space around the innermost element’s content of the box-like structure. The space around padding and margin is called a border.

The difference between the padding, margin, and border you can observe below:

As we know common styles in all the pages we always preferred CSS over HTML.
So, in this tutorial, all common properties are implemented in CSS only.
As we discussed above it is not possible to apply different colors but you can vary margin from box model by setting the background color of the html page to different color and margin color by default in white color.

Syntax

div
{
margin: 10px;
background: black;
}

Margin can be applied to the top, right, bottom and left side.

Syntax 1:

div
{
margin: 10px,10px,10px,10px; //margin positions
}

Explanation: If we apply margin with 4 values then the first value is for top, the second value is for right, the third value is for the bottom and the fourth value is for left applied respectively.

Syntax 2:

div
{
margin: 10px,10px,10px; //margin positions
}

Explanation: If we apply margin with 3 values then the first value is for top, the second value is for left and right, the third value is for bottom applied respectively.

Syntax 3:

div
{
margin: 10px,10px; //margin positions
}

Explanation: If we apply margin with 2 values then the first value is for the top and bottom and the second value is for left and right applied respectively.

Syntax 4:

div
{
margin: 10px; //margin positions
}

Explanation:

If we apply margin with only single values then applied it for all four sides equally.
If we want to apply only margin side margin then CSS provides predefined properties.
margin-left: 10px: apply margin 10px to left side.

Syntax:

div
{
margin-left: 10px;
}

margin -right: 10px: apply margin 10px to right side.

Syntax:

div
{
margin-right: 10px;
}

margin -top: 10px: apply margin 10px to top side.

Syntax:

div
{
margin-top: 10px;
}

margin -bottom: 10px: apply margin 10px bottom side.

Syntax:

div
{
margin-bottom: 10px;
}

Examples of CSS Margin Color

Given below are the examples of CSS Margin Color:

Example #1: Applying margin from the left side

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title> Margin Left</title>
<link rel="stylesheet" href="MarginLeft.css"></link>
</head>
<body>
<font color="green" style="align:center">
<h2>Without Margin</h2>
</font>
<div class="margin1">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
<font color="green" style="align:center">
<h2>With Margin</h2>
</font>
<div class="margin2">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
</body>
</html>

CSS Code:

.margin2
{
border: 1px solid black;
margin-left:100px;
background: brown;
}
.margin1
{
border: 1px solid black;
background: brown;
}

Output:

Explanation:

In the above code, margin-left moves text from the left side with white space.

Example #2: Applying margin from the right side

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title> Margin Right</title>
<link rel="stylesheet" href="MarginRight.css"></link>
</head>
<body>
<font color="green" style="align:center">
<h2>Without Margin</h2>
</font>
<div class="margin1">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
<font color="green" style="align:center">
<h2>With Margin</h2>
</font>
<div class="margin2">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
</body>
</html>

CSS Code:

.margin2
{
border: 1px solid black;
margin-right:100px;
background: fuchsia;
font-size: 25px;
}
.margin1
{
border: 1px solid black;
background: fuchsia;
font-size: 25px;
}

Output:

Explanation:

In the above code, margin-right moves text from the right side with white space.

Example #3: Applying margin from the top side

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Margin Top</title>
<link rel="stylesheet" href="MarginRight.css"></link>
</head>
<body>
<font color="green" style="align:center">
<h2>Without Margin</h2>
</font>
<div class="margin1">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
<font color="green" style="align:center">
<h2>With Margin</h2>
</font>
<div class="margin2">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
</body&gt
</html>

CSS Code:

.margin2
{
border: 1px solid black;
margin-top:100px;
background: lime;
font-size: 25px;
}
.margin1
{
border: 1px solid black;
background: lime;
font-size: 25px;
}

Output:

Explanation:

In the above code, the margin-top moves text from the side with white space.

Example #4: Applying margin from the bottom side

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Margin Bottom</title>
<link rel="stylesheet" href="MarginBottom.css"></link>
</head>
<body>
<font color="green" style="align:center">
<h2>With Margin</h2>
</font>
<div class="margin2">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
<font color="green" style="align:center">
<h2>Without Margin</h2>
</font>
<div class="margin1">
<font color="white"><p>Just, varying margin from box model
with defalt white color. We can't apply special color to margin. If
we want to apply colors around the text we can use border or padding
with different colors.</p>
</font>
</div>
</body>
</html>

CSS Code:

.margin2
{
border: 1px solid black;
margin-bottom:100px;
background: gray;
font-size: 25px;
}
.margin1
{
border: 1px solid black;
background: gray;
font-size: 25px;
}

Output:

Explanation:

In the above code, margin-left moves text from the bottom side with white space.

Conclusion

We can’t apply different colors to margin because it’s beyond its elements box. We just varied the margin from elements with making background to different colors and margin to white color.

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

Одно значение — определяет отступы для всех сторон блока.

margin: все стороны;
margin: 10px;

Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

margin: верх-низ лево-право;
margin: 10px 20px;

Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

margin: верх лево-право низ;
margin: 10px 20px 5px;

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

margin: верх право низ лево;
margin: 5px 10px 15px 20px;

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.dialog {
width: 80%; /* Ширина блока */
background: #D4E3A5; /* Цвет фона */
border: 2px solid #7D9B3D; /* Параметры рамки */
padding: 1rem; /* Поля */
margin: auto; /* Выравниваем по центру */
}
</style>
</head>
<body>
<div class=»dialog»>
Полинезийцы называют Млечный путь Манго-Роа-И-Ата,
что в переводе с маори означает «Длинная акула на рассвете».
</div>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.

Пример 3. Значение auto

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.center {
display: block; /* Блочный элемент */
margin: auto; /* Выравниваем по центру */
}
</style>
</head>
<body>
<img src=»image/html-128.png» alt=»HTML5″ class=»center»>
</body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинки по центру

Проценты

В качестве значения margin можно использовать процентную запись, с которой связаны следующие особенности.

По горизонтали проценты считаются от ширины всего блока.
По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
p + .stat {
margin-top: -1rem; /* Поднимаем текст вверх */
}
.stat {
font-size: 3rem; /* Размер текста */
}
</style>
</head>
<body>
<p>Продано ёлок</p>
<p class=»stat»>64</p>
</body>
</html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Рис. 5. Поднимаем блок вверх через margin-top

Обнуление margin

Для некоторых элементов браузер добавляет margin автоматически. Вот несколько примеров:

для <body> по умолчанию margin задан как 8px;
для списков <ul>, <ol>, <dl>margin-top и margin-bottom заданы как 1em;
для <blockquote> и <figure>margin-left и margin-right заданы как 40px.

Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента <body>, после чего элемент <header> плотно прилегает к краям браузера.

Пример 5. Обнуление margin

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
body {
margin: 0; /* Обнуляем */
}
header {
background: #D4E3A5; /* Цвет фона */
padding: 1em; /* Поля вокруг текста */
}
</style>
</head>
<body>
<header><h1>Кря-кря</h1></header>
</body>
</html>

Результат данного примера показан на рис. 6.

Рис. 6. Обнуление margin у <body>

Последнее изменение: 17.01.2023

Источник

rus · Posted December 17, 2022

html:

<td>
<span class=»qty-minus» onclick=»qtyMinus(); return false;» data-id=»<?=$id;?>» data-qty=»<?= $item[‘qty’];?>» data-weight=»<?=$item[‘weight’];?>»>
<i class=»bi bi-dash-circle-fill text-success»></i>
</span>
<span class=»qty»><?= $item[‘qty’];?></span>
<span class=»qty-plus» onclick=»qtyPlus(); return false;» data-id=»<?=$id;?>» data-qty=»<?= $item[‘qty’];?>» data-weight=»<?=$item[‘weight’];?>»>
<i class=»bi bi-plus-circle-fill text-success»></i>
</span>
</td>

js:

// Изменение количества товара в заказа — плюс
function qtyPlus() {
$(‘.qty-plus’).on(‘click’, function(){
let str = $(this).data(‘id’);
if(typeof str === ‘string’){
let id_arr = str.split(‘-‘),
id = id_arr[0],
mod = id_arr[1],
qty_update = $(this).data(‘qty’)+1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}else if(!Number.isNaN(str)){
let id = $(this).data(‘id’),
mod = null,
qty_update = $(this).data(‘qty’)+1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}
});
return true;
}
// Изменение количества товара в заказа — минус
function qtyMinus() {
$(‘.qty-minus’).on(‘click’, function(){
let str = $(this).data(‘id’);
if(typeof str === ‘string’){
let id_arr = str.split(‘-‘),
id = id_arr[0],
mod = id_arr[1],
qty_update = $(this).data(‘qty’)-1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}else if(!Number.isNaN(str)){
let id = $(this).data(‘id’),
mod = null,
qty_update = $(this).data(‘qty’)-1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}
});
return true;
}

Суть в том, что клик срабатывает только со второго раза… Почему?
Страница: https://shop-site.su/category/men

Нужно положить товар в корзину и либо в модальном окне, либо перейти на страницу оформления заказа (а лучше и там и там покликать) и покликать на плюс и минус кол-ва товара.

Решил проблему:
убрал из html вызов функции onclick=»qtyMinus(); return false;»

а js переделал вот так:
$(‘body’).on(‘click’, ‘.qty-minus’, function(){…});

Но вот ответ на вопрос почему, все же хотелось бы знать.

Источник

CSS свойства

Определение и применение

CSS свойство margin устанавливает величину внешнего отступа от каждого края элемента в одном объявлении.

CSS свойство margin объединяет в себе такие свойства как margin-top, margin-right, margin-bottom и margin-left. Это свойство может иметь от одного до четырех значений.

На изображении темно-серым цветом обозначена зона за которую отвечает свойство margin:

При указании четырёх значений (5px 10px 15px 20px) — порядок расстановки отступов будет следующий: Top(5px) — Right(10px) — Bottom(15px) — Left(20px). Для запоминания порядка расстановки отступов в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).

При указании трёх значений (5px 10px 15px) — порядок расстановки отступов будет следующий: Top (5px) — Right & Left (10px) — Bottom (15px).

При указании двух значений (5px 10px) — первое значение(5px) будет задавать размер отступа от верха и от низа, второе (10px) значение — отступы слева и справа.

При указании одного значения (5px) — отступ со всех сторон будет одного размера — 5px.

Поддержка браузерами

CSS синтаксис:

margin:"length | auto | initial | inherit";

JavaScript синтаксис:

object.style.margin = "15px"

Значения свойства

Значение	Описание
length	Определяет отступ в пикселях, см и др. единицах. Значение по умолчанию 0. Допускаются отрицательные значения.
%	Определяет отступ в процентах от содержащего блока родительского элемента. Допускаются отрицательные значения.
auto	Браузер вычисляет отступ самостоятельно.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
h1 {
margin:15px 100px 50px; /* Порядок расстановки отступов будет следующий: Top (15px) - Right & Left (100px) - Bottom (50px). */
}
.primer1 {
width : 50px; /* задаём ширину блока */
height : 50px; /* задаём высоту блока */
background-color : yellow; /* задаём цвет заднего фона */
margin : 25px; /* величина отступа со всех сторон будет одного размера - 25px. */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color : lime; /* задаём цвет заднего фона */
margin : 25px 75px; /* первое значение(25px) будет задавать размер отступа от верха и от низа, второе (75px) значение - отступы слева и справа.  */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color : blue; /* задаём цвет заднего фона */
margin : -40px 25px 25px 100px; /* порядок расстановки отступов будет следующий: Top(- 40px) - Right(25px) - Bottom(25px) - Left(100px). */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
	<body>
		<h1>Заголовок первого уровня</h1>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
	</body>
</html>

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

CSS свойства

Источник

Создание фреймов, внутренних отступов и расстояний между отдельными элементами HTML-страниц называется блочная модель (box model). Каждый элемент HTML может быть представлен как сложный, в своем собственном блоке, который имеет следующие компоненты:

поле (margin): внешняя часть блока, бесцветная и прозрачная. Чем больше граница, тем больше расстояние до соседних элементов.
рамка (border): окружает содержимое и внутренние отступы.
внутренний отступ (padding) : расстояние между содержимым поля (самого элемента) и рамкой. В отличие от границы, внутренний отступ может быть цветным — определяется цветом фона рамки.
контент (content): фактическая часть поля, сам элемент — рисунок, таблица, текстовое поле и т. д.

Как работает блочная модель

Определение ширины и высоты элемента

Когда вы указываете ширину и высоту элемента с помощью width и height, вы указываете только размер содержимого. Размер всего блока также зависит от границы, рамки и внутреннего отступа.

Например, пусть для элемента указываются следующие параметры:

width:200px;

padding:20px;

border:2px solid blue;

margin:15px;

Для этого блока ширина будет 200 (содержимое) + 2 * 20 (левый и правый внутренний отступ) + 2 * 2 (левая и правая граница) + 2 * 15 (левая и правая граница) = 274 пикселей.

Как видите, элемент будет занимать значительно больше места, чем ширина, указанная для содержимого. Об этом следует помнить при создании страниц, чтобы избежать наложения отдельных элементов.

Блочная модель и Internet Explorer

Большинство браузеров рассчитывают размеры блоков, как было описано выше. Одним заметным исключением является Internet Explorer — для этого браузера ширина включает рамки border и отступы padding. По этой причине элементы, которые определены шириной width, будут казаться уже, чем в других браузерах. То же самое относится и к высоте height.

Однако, решение проблемы очень простое: достаточно указать DOCTYPE для документа HTML, и Internet Explorer будет соответствовать общепринятому методу использования метода блочной модели.

CSS рамки (border)

CSS border команды дают возможность определить вид рамки: тип, цвет и толщина.

Вид рамки

Команда вида рамки задается с помощью border-style и может принимать следующие значения:

none: без рамки
dotted: рамка, сделанная из точек
dashed: рамка — пунктирная линия
solid: рамка сплошной линией
double: рамка двумя сплошными линиями
groove: трехмерная вогнутая рамка
ridge: трехмерная вогнутая рамка
inset: трехмерная объемная рамка, обращенная внутрь
outset: трехмерная объемная рамка, обращенная наружу

Толщина рамки

Свойство толщины рамки задается с помощью border-width, а значение можно указывать как цифрами (в пикселях), так и одним из следующих слов: thin, medium, thick, которые браузер будет интерпретировать автоматически, чтобы создать соответственно узкую, нормальную или толстую рамку. Обратите внимание, что border-width будет эффективно реализован, только если уже указан тип рамки (border-style).

Цвет рамки

Чтобы установить цвет рамки используется border-color. Аналогично цвету текста, сами значения для цвета рамки могут быть:

название цвета, например olive или red;
RGB значение, например rgb(0,255,0)
HEX значение, например #00FF00

Указание цвета рамки будет действительным, только если указан вид рамки (border-style).

Индивидуальные стили для отдельных сторон рамки

Вы можете указать различный тип рамки для каждой из четырех сторон, используя следующие слова:

border-top-style (верхняя рамка)
border-right-style (правая рамка)
border-bottom-style (нижняя рама)
border-left-style (левая рамка)

Аналогичным образом устанавливаются значения цвета и толщины для отдельных сторон: замените стиль на цвет или ширину соответственно (например, border-top-color устанавливает цвет для верхней рамки).

Стиль рамки: сокращенная запись

Все свойства рамки могут быть указаны кратко, используя border:

border: 3px dotted orange;

Порядок значений: толщина, тип, цвет, но, за исключением требуемого значения типа рамки, необязательно устанавливать все значения (если какое-либо значение опущено, браузер будет использовать значение по умолчанию).

CSS границы (margin)

С помощью команды margin можно обеспечить пустое пространство вокруг элемента. Это пространство является бесцветным и прозрачным и не выходит за рамки элемента.

Размеры границы могут быть назначены как индивидуально для всех четырех сторон, так и сокращенно — для всех сразу.

Для значения свойства margin используются:

цифры — соответствующие единицы измерения: px, pt, em и т.д.;
проценты (%) — за основу берется размер элемента;
ключевое слово auto — результат зависит от того, какие другие значения границы указаны.

Индивидуальные границы

Вот пример, для установки индивидуальных границ:

margin-top: 20px;

margin-right: 15px;

margin-bottom: 10px;

margin-left: 5px;

В этом примере, верхняя граница — 20 пикселей, правая — 15, нижняя — 10 и левая — 5 пикселей.

Использование сокращенной записи

Вы можете использовать сокращенную запись четырех границ следующим образом:

margin: 20px 15 px 10px 5px;

Когда после margin указаны 4 значения, они соответствуют сначала верхней, правой, нижней и левой границе (движение по часовой стрелке). Margin может быть описан тремя значениями:

margin: 20px 10px 5px;

В этом случае, первое и третье значение описываются для верхней и нижней границы, а среднее значение является одинаковым для левой и правой границы.

Когда для margin используется только два значения, то первое значение отражает верхнюю и нижнюю границу, второе — левую и правую.

Естественно, вы можете задать все границы равными — достаточно указать только одно значение:

margin: 25px;

Еще несколько примеров

Чтобы центрировать элемент в середине страницы, вы можете использовать ключевое слово auto следующим образом:

margin-left: auto;

margin-right: auto;

Выравнивание элемента по правому краю, достигается путем установки для границы некоторого числового значения и автоматического для левой границы:

margin-right: 1em;

margin-left: auto;

CSS отступы (padding)

Отступ (padding) используется для того, чтобы освободить место между содержимым элемента и его рамкой border.

Как и margin, значения отступа можно задать индивидуально для всех четырех сторон или для всех сразу.

Для значения свойства padding используются:

числа, за которыми следуют их единицы измерения (px, pt, em и т.д.);
проценты (%) — размер отступа рассчитывается как процент от размера элемента;
ключевое слово auto.

Определение индивидуальных отступов

Каждый из четырех отступов может быть задан отдельно:

padding-top: 30px;

padding-right: 25px;

padding-bottom: 20px;

padding-left: 15px;

Таким образом, верхний отступ станет 30 пикселей, правый — 25, нижний — 20, и левый — 15 пикселей.

Использование сокращенной записи

Как и margin, padding может быть установлен сокращенным способом:

padding: 25px 30px 20px 15px; Когда padding использует четыре значения, они означают соответственно верхний, правый, нижний и левый отступы.
padding: 30px 20px 15px; Три значения соответствуют верхнему, (левый и правый — равные, вторая величина) и нижнему отступу.
padding: 30px 20px; Padding с двумя значениями используется, когда верхний отступ равен нижнему (первая величина), а левый — равен правому отступу (второе значение).
padding: 25px; Если все отступы равны, они могут задаваться только одним значением padding.

Несколько примеров

Отступ в ячейках таблицы. Таким образом, рамка текстового поля не разбивается:

td {padding-left: 0.5 em; padding-right:2em}

Смещение заголовка, чтобы избежать наложения на фоновое изображение:

h1 {background: url(sun.jpg) no-repeat; height: 80px; padding-left: 130px;}

Читайте далее: CSS уроки, 5 часть: фон, позиция

Post Views: 3 007

VECHNOST

Наша веб-студия — это то место, где рождаются оригинальные идеи, выдвигаются необычные предложения и находятся совершенно уникальные и, главное, действенные пути решения самых сложных задач!
Комплексный подход к проектам: разработка сайтов, поддержка, эффективное продвижение.

Источник

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#propdef-margin

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает величину отступа от каждого края элемента. Отступом является
пространство от границы текущего элемента до внутренней границы его родительского
элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до
края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены
отступы. Чтобы от них избавиться, следует устанавливать значение margin
для селектора <body> равное нулю.

Свойство margin позволяет задать величину отступа
сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

margin: [значение | проценты | auto] {1,4} | inherit

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений

Число значений	Результат
1	Отступы будут установлены одновременно от каждого края элемента.
2	Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3	Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4	Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселах (px), процентах (%) или других
допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным
числом.

auto: Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   body { 
    margin: 0; /* Убираем отступы */
   }
   .parent {
    margin: 20%; /* Отступы вокруг элемента */
    background: #fd0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   } 
   .child {
    border: 3px solid #666; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin: 10px; /* Отступы вокруг */
   }
  </style>
 </head> 
 <body> 
  <div class="parent">
   <div class="child">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat. 
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin

Объектная модель

[window.]document.getElementById(«elementID«).style.margin

Браузеры

Internet Explorer 6 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto. Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Примечание

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.

Схлопывание не срабатывает:

для элементов, у которых на стороне схлопывания задано свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.

Источник

simulated box-model:

Introduction to CSS Margin Color

Syntax

Examples of CSS Margin Color

Example #1: Applying margin from the left side

Example #2: Applying margin from the right side

Example #3: Applying margin from the top side

Example #4: Applying margin from the bottom side

Conclusion

Recommended Articles

Значения margin

Значение auto

Проценты

Отрицательный margin

Обнуление margin

Определение и применение

Поддержка браузерами

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

Как работает блочная модель

Определение ширины и высоты элемента

Блочная модель и Internet Explorer

CSS рамки (border)

Вид рамки

Толщина рамки

Цвет рамки

Индивидуальные стили для отдельных сторон рамки

Стиль рамки: сокращенная запись

CSS границы (margin)

Индивидуальные границы

Использование сокращенной записи

Еще несколько примеров

CSS отступы (padding)

Определение индивидуальных отступов

Использование сокращенной записи

Несколько примеров

VECHNOST

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Примечание

Читайте также: