Свойства margin , padding , строчные и блочные элементы.
Давайте рассмотрим, что такое margin и padding и какие между ними различия. Margin это внешний отступ элемента, а padding внутренний.
Если мы имеем два блока один в одном и для внутреннего блока нужен отступ мы используем свойство padding. Но если у нас есть два блока
расположенные радом друг с другом и нужно задать отступ между ними, мы используем свойство margin.Обращаем внимание что для первой картинки могут быть использованы как padding так и margin. Разница в том, что как говорилось ранее padding это внутренний отступ и для размещения внутреннего блока свойство padding задается наружному блоку. Margin работает примерно так же, но наоборот, задается внутреннему блоку для отступа от наружного.
Пример на первую картинку c использованием свойства padding:
<style>
.blok-verhniy{padding-top: 10px; padding-right: 10px; padding-bottom:
10px; padding-left: 10px; }
</style>
<body>
<div class="blok-verhniy">
<div class="blok-vnytreniy"></div>
</div>
</body>
И пример с использованием margin:
<style>
.blok-vnytreniy{margin-top: 10px; margin-right: 10px; margin-bottom:
10px; margin-left: 10px; }
</style>
</head>
<body>
<div class="blok-verhniy">
<div class="blok-vnytreniy"></div>
</div></body>
Пример для второй картинки:
<style>
.blok-right{margin-left: 15px;}
</style>
</head>
<body>
<span class="blok-left"></span >
<span class="blok-right"></span ></body>
Рассматривая эти свойства на практике более сильным приоритет будет обладать свойство margin в отличии от свойства padding. Но для внутреннего отступа желательно использовать свойство padding.
Форма записи.
Padding-top:значение; Margin- op:значение;
Padding-right:значение; Margin-right:значение;
Padding-bottom:значение; Margin-bottom:значение;Padding-bottom:значение; Margin-bottom:значение;
Значения этим свойствам задаются в: px, %, em и тд. Например: Padding-top:25px; Также существует сокращенная запись margin и padding.
4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:
padding: 2px 4px 5px 10px;
margin: 2px 4px 5px 10px;
3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней:
padding: 3px 6px 9px;
margin: 3px 6px 9px;
2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:
padding: 6px 12px;
margin: 6px 12px;
1 значение: задаются одинаковые отступы для всех сторон элемента:
padding: 3px;
margin: 3px;
Строчные и блочные элементы.
Отличие строчных от блочных элементов в том-что блочных элементы на веб-странице начинается с новой строки и идут друг под другом, имеет вид прямоугольника и занимает всю его ширину. Высота блочного элемента зависит от его содержимого. Строчный элемент идут в одну строку. Сколько строчных элементов будет в строке зависит от размера строчного элемента.
К блочным элементам относятся тэги:
<address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>,
<p>, <pre>, <table>, <ul>
и элементы у которых значение display задано как block, list-item, table.
К строчным элементам относятся тэги: <img>, <span>, <a>, <q>, <code> и элементы у которых значение display установлено как inline.
Как мы видим не зависимо от начального состояния элемента (сторчный или блочный) его значение можно изменить с помощью свойства display.
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
