Внешние отступы

Здравствуйте! После рассмотрения блочной модели CSS переходим к внешним отступам. Свойство margin определяет отступ элемента от других элементов или границы внешнего контейнера. Существуют специальные свойства CSS для задания отступов для каждой стороны:

margin-top: отступ сверху
margin-bottom: отступ снизу
margin-left: отступ слева
margin-right: отступ справа

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
            div{
                margin-top: 30px; /* отступ сверху */
                margin-left: 25px; /* отступ слева */
                margin-right: 20px; /* отступ справа */
                margin-bottom: 15px; /* отступ снизу */
                 
                border: 3px solid red; /* граница */
            }
        </style>
    </head>
    <body>
        <div>
            <p>Первый блок</p>
        </div>
        <div>
            <p>Второй блок</p>
        </div>
        <div>
            <p>Третий блок</p>
        </div>
    </body>
</html>
 
Читать далее

		Это интересно 0	Как всё будет выглядеть в блоге: Внешние отступы Здравствуйте! После рассмотрения блочной модели CSS переходим к внешним отступам Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/13078445/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Внешние отступы </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! После рассмотрения блочной модели CSS переходим к внешним отступам </div> </div> Внешние отступы <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/13078445/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Внешние отступы</a> <div style="font-family:trebuchet MS;">Здравствуйте! После рассмотрения блочной модели CSS переходим к внешним отступам </div> </div>

webguru

04.01.2017

В избранное Пожаловаться Просмотров: 347

Комментарии ⁰

Полезные сервисы и программы для начинающих пользователей 7268

Важные темы:

Активные участники:

Последние откомментированные темы:

Внешние отступы

Комментарии временно отключены

Открытая группа
38975 участников