Для создания рамки вокруг текста используйте стилевое свойство border, добавляя его к соответствующему селектору. Например, если для текста применяется тег <p>, то для него надо установить следующий стиль.
P { border: 1px solid red; /* Толщина рамки в пикселах, тип границы (в данном случае сплошная линия) и цвет линии */ padding: 5px; /* Расстояние от текста до рамки */ }
Применение свойства border к текстовому абзацу продемонстрировано в примере 1.
Пример 1. Рамка вокруг абзаца
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка вокруг текста</title> <style> p { border: 1px solid red; padding: 10px; } </style> </head> <body> <p>Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид рамки вокруг абзаца
Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом <div>, для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).
Пример 2. Рамка вокруг слоя
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка вокруг текста</title> <style> .outline { border: 1px solid red; padding: 0 10px; } </style> </head> <body> <div class="outline"> <p>Перед тем как убить героя, антагонист обязательно рассказывает ему про все свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист весьма умело использует данное время против самого злодея.</p> <p>Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.</p> </div> </body> </html>
Сайт