<style type="text/css">
.notetitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем границу снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как встроенный элемент */
background: #ffeebf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Запрещены переносы текста */
}
.note {
border: solid 1px #634f36; /* Параметры рамки */
background: #f3f0e9; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em 0; /* Значение отступов */
}
</style>
<br><h1>Замена блочного элемента на встроенный</h1><br>
Встроенные элементы можно превращать в блочные с помощью свойства <b>display</b> и его значения <b>block</b>.
Также возможно и обратное действие через аргумент <b>inline</b>.</p>
<p class="notetitle">Примечание</p>
<p class="note">В данном примере блочный тег <P> отображается на веб-странице как встроенный элемент.
Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей.
А, как известно, ширина блочных элементов не зависит от ширины содержимого,
поэтому и приходится представлять тег <P> в виде встроенного элемента.
В принципе, аналогичным решением будет использовать вместо <P> тег <SPAN>.</p>