//Синтаксис
margin: [<размер> | <проценты> | auto] {1,4}
//Синтаксис
padding: [<размер> | <проценты>] {1, 4}
//Синтаксис
margin-bottom: <размер> | <проценты> | auto
//Синтаксис
margin-left: <размер> | <проценты> | auto
//Синтаксис
margin-right: <размер> | <проценты> | auto
//Синтаксис
margin-top: <размер> | <проценты> | auto
//Синтаксис
padding-bottom: [<размер> | <проценты>]
//Синтаксис
padding-left: [<размер> | <проценты>]
//Синтаксис
padding-right: [<размер> | <проценты>]
//Синтаксис
padding-top: [<размер> | <проценты>]
<html>
<head>
<style type='text/css'>
/* Отступ от содержимого элемента до его верхней границы равен 30, до левой 20, до нижней 10 и до правой 40 px. */
.primer1
{
border-style:solid;
padding-top:30px;
padding-left:20px;
padding-bottom:10px;
padding-right:40px;
}
</style>
</head>
<body>
<p class='primer1'>Элемент с заданным внутренним отступом.</p>
</body>
</html>
<html>
<head>
<style type='text/css'>
.primer2
{
border-style:solid;
border-width:1px;
background-color:red;
}
.primer21
{
border-width:1px;
border-style:solid;
background-color:white;
}
.primer21
{
margin-top:20px;
margin-bottom:40px;
margin-left:70px;
margin-right:10px;
}
</style>
</head>
<body>
<div class='primer2'>
<p class='primer21'>Элемент с заданным внешним отступом.</p>
<div>
</body>
</html>
<html>
<head>
<style type='text/css'>
/* Отступ от содержимого до границы элемента сверху будет равен 60, справа 20, снизу 40, а слева 50 пикселям */
.par1
{
border:2px solid;
padding:60px 20px 40px 50px;
}
/* Отступ от содержимого до границы элемента сверху будет равен 40, слева и справа 30, а снизу 10 */
.par2
{
border:2px solid;
padding:40px 30px 10px;
}
/* Отступ от содержимого до границы элемента сверху и снизу будет равен 40, а слева и справа 30 */
.par3
{
border:2px solid;
padding:40px 30px;
}
</style>
</head>
<body>
<p class='par1'>Внутренний отступ сверху равен 60, справа 20, снизу 40, а слева 50 пикс.</p>
<p class='par2'>Внутренний отступ сверху равен 40, слева и справа 30, а снизу 10 пикс.</p>
<p class='par3'>Внутренний отступ сверху и снизу равен 40, а слева и справа 30 пикс.</p>
</body>
</html>
<html>
<head>
<style type='text/css'>
.dv1
{
border-style:solid;
border-width:1px;
background-color:red;
}
.par1,.par2,.par3
{
border-width:1px;
border-style:solid;
background-color:white;
}
/* Внешний отступ сверху элемента будет равен 50, справа 20, снизу 40 и слева 50 пикселям */
.par1
{
margin:50px 20px 40px 50px;
}
/* Внешний отступ сверху элемента будет равен 30, слева и справа 40, а снизу 50 пикселям */
.par2
{
margin:30px 40px 50px;
}
/* Внешний отступ сверху и снизу элемента будет равен 30, а слева и справа 50 пикселям */
.par3
{
margin:30px 50px;
}
</style>
</head>
<body>
<div class='dv1'>
<p class='par1'>Внешний отступ сверху равен 100, справа 20, снизу 40 и слева 100 пикселям.</p>
</div>
<br />
<div class='dv1'>
<p class='par2'>Внешний отступ сверху равен 30, слева и справа 40, а снизу 50 пикселям.</p>
</div>
<br />
<div class='dv1'>
<p class='par3'>Внешний отступ сверху и снизу равен 30, а слева и справа 50 пикселям.</p>
</div>
<p><b>Обратите внимание:</b> внешний отступ в данном примере закрашен красным. </p>
</body>
</html>