Самоучитель по HTML

Справочник HTML

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

margin-left - определяет внешнюю границу элемента от соседей слева;
margin-right - определяет внешнюю границу элемента от соседей справа;
margin-top - определяет внешнюю границу элемента от соседей сверху;
margin-bottom - определяет внешнюю границу от соседей снизу.

Например:

   <HTML>
      <HEAD>
         <TITLE>Свойства текста</TITLE>
      </HEAD>
      <BODY>
         <P style="margin-left: 100">Параметр <b>margin-left</b> создаёт
            отступ от элемента страницы слева. Сейчас отступ равен
            100 пикселям.</P>
         <P style="margin-right: 150">Параметр <b>margin-right</b>
            создаёт отступ от элемента страницы справа. Сейчас он равен
            150 пикселям.</P>
         <P style="margin-top: 50">Параметр <b>margin-top</b> создал отступ от 
            верхнего элемента в 50 пикселей.</P>
         <P style="margin-bottom: 50">Параметр <b>margin-bottom</b> создал
            отступ от нижнего элемента в 50 пикселей</P>
         <P>Нижний эелемент страницы.
      </BODY>
   </HTML>

margin-left, margin-right, margin-top

Теперь рассмотрим параметры, которые дадут возможность создавать рамку вокруг какого-либо элемента:

border-top-width - устанавливает ширину верхней границы;
border-bottom-width - устанавливает ширину нижней границы;
border-left-width - устанавливает ширину границы слева;
border-right-width - установка ширины границы справа.

Все эти значения будут действовать только в том случае, если указан параметр border-style. Он задаёт стиль рамки и имеет следующие значения:

dotted - рисует точечную рамку;
dashed - рисует штрихованную рамку;
solid - рисует сплошную рамку;
double - рисует двойную сплошную рамку;
groove - рисует трёхмерную вдавленную рамку;
ridge - рисует трёхмерную выпуклую рамку;
inset - рисует трёхмерную выпуклую ступенчатую рамку;
outset - рисует трёхмерную вдавленную ступенчатую рамку;
none - запрещает рисование рамки;

   <HTML>
      <HEAD>
         <TITLE>Свойства текста</TITLE>
         <STYLE>
            p {
                border-top-width: 10;
                border-bottom-width:10;
                border-left-width: 5;
                border-right-width: 5;
                border-style: dotted;
                border-color: green;
               }
         </STYLE>
      </HEAD>
      <BODY>
         <P>Так как мы задали значение <b>dotted</b> параметра
            <b>border-style</b>, то рамка отобразилась точками.</P>
         <P style="border-style: dashed">Теперь же рамка отображается
            штрихованной линией, так как использовался параметр 
            <b>border-style</b> со значением <b>dashed</b></P>
         <P style="border-style: solid">Значение <b>solid</b> рисует 
            сплошную линию</P>
         <P style="border-style: double">Используя значение <b>double</b>,
            мы получили двойную рамку.</P>
         <P style="border-style: groove">Значение <b>groove</b> создаёт
            трёхмерную вдавленную линию рамки.</P>
         <P style="border-style: ridge">Значение <b>ridge</b> рисует
            трёхмерную выпуклую линию</P>
         <P style="border-style: inset">А это трёхмерная выпуклая ступенчатая
            линия, полученная при помощи значения <b>inset</b>
         <P style="border-style: outset"> Значение <b>outset</b> создаёт
            трёхмерную вдавленную ступенчатую линию</P>
         <P style="border-style: none">А теперь рамки нет. Использовалось
            значение <b>none</b></P>
      </BODY>
   </HTML>

border-style, border-top-width, border-bottom-width

Рассмотрим ещё несколько параметров, отвечающих за создание внутренних границ объекта. Например, если при создании рамки вокруг текста, мы хотим, чтобы текст прилегал не вплотную к рамке, а на определённом заданном нами расстоянии. Вот эти параметры:

padding-top - задаёт верхнее внутреннее поле объекта;
padding-bottom - задаёт нижнее внутреннее поле объекта;
padding-left - задаёт левое внутреннее поле объекта;
padding-right - задаёт правое внутреннее поле объекта;
padding - это общий параметр для задания всех внутренних полей объекта.

   <HTML>
      <HEAD>
         <TITLE>Свойства текста</TITLE>
         <STYLE>
            p {
                border-width: 10;
                border-style: solid;
                border-color: green;
                padding: 30;
               }
         </STYLE>
      </HEAD>
      <BODY>
         <p>Текст окружён рамкой и лежит от неё на расстоянии
                                              в 30 пикселей.</p>
         <p style="padding-top: 5; padding-bottom: 5">Здесь текст 
            сверху и снизу лежит от рамки на расстоянии 5 пикселей,
            а с боков на расстоянии 30 пикселей.</p>
      </BODY>
   </HTML>

padding, padding-top, padding-bottom

Предыдущая страница Следующая страница

Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru"><b>Самоучитель по созданию Web-страниц.</b></a>

Хостинг от uCoz

Самоучитель по HTML

Справочник HTML

Оглавление:

CSS

Свойства блоков текста