Ваш текст или важную ссылку нужно обвести рамкой, для того чтобы она смотрелась лучше и была заметной? Я расскажу и покажу на примере как обвести рамкой любого цвета. Стилевой элемент border (влияет на толщину линий) поможет нам в этом, любой текст, ссылку или изо можно поместить в кавычки, туда же можно добавить h1 и т.д, div, p и т.п.

Примеры

Рамка красного цвета – код красного цвета #FF0000 :

<p style=”border:3px #FF0000  solid; width:175px;”>
текст , текстовая ссылка, img</p>

 

текст, текстовая ссылка, ссылка на картинку

Элемент width отвечает за ширину, можно менять в большую или меньшую сторону. На примере 175 px, а можно 100 или больше.

Синяя рамка (цвет может быть любой) для строчных или встроенных элементов.

это прото <span style=”border:3px #0000FF  solid; width:110px;”>необходимо</span> запомнить

это прото необходимо запомнить

Кроме span,поддерживает <hr>, <img> и т.п

 

Разделение на виды

 

Сплошная линия – solid 

Примеры этого типа смотрите  выше.

Точечная линия – dotted

<p style=”border:3px #0000FF dotted; width:165px;”>все просто и легко</p>

 

 все просто и легко

Пунктирная линия – dashed

<p style=”border:3px #FF0000  dashed; width:165px;”>интересный вариант</p>

 

интересный вариант

Рельефная – ridge

Толщину (border) делайте  обязательно больше.

<p style=”border:6px #0000FF  ridge; width:165px;”>толщина 6px</p>

  толщина 6px

Двойная линия – double

<p style=”border:3px #FF0000  double; width:165px;”>две сплошных</p>

 

       две сплошных

Выравнивание содержимого и самой рамки

Знакомые элементы left (влево), center (по центру), right (вправо) тоже можно использовать благодаря свойству text-align.

Для того чтобы наша надпись смотрелась красиво сдвинем по центру.

<p style=”border:3px #0000FF  ridge; width: 165px; text-align:center;” >так лучше?</p>

 

так лучше?

Если у вас жирный текст или заголовок, либо наоборот он слишком тесный можно выравнивать линии рамки с помощью свойства  padding.

Пример с анкорной ссылкой ;

<p style=”border: 3px #FF0000 solid; width: 190px; padding: 5px 2px 5px 4px;”> <a href=”https://zitwork.ru”>Фриланс биржа</a></p>

         Фриланс биржа

Padding:

5px  первая цифра – отступ в вержней части

2Px  вторая – справа

5px третья – снизу

4px четвертая – отступ  справа.

Эти цифры можно менять, регулировать под ваши нужды.

Если нужен внешний отступ  от других  элементов в общем коде, добавьте свойство margin – тоже самое что и с  padding, также нужно отрегулировать четыре стороны.

 

<p style=”border:3px #00B344 ridge; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px;” > внешний отступ</p>

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

 

Может быть интересно: