<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>

<p>Встроенные элементы можно превращать в блочные с помощью свойства <b>display</b> и его значения <b>block</b>.
Также возможно и обратное действие через аргумент <b>inline</b>.</p>

<p class="notetitle">Примечание</p>
<p class="note">В данном примере блочный тег <P> отображается на веб-странице как встроенный элемент.   
Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей.   
А, как известно, ширина блочных элементов не зависит от ширины содержимого,   
поэтому и приходится представлять тег <P> в виде встроенного элемента.   
В принципе, аналогичным решением будет использовать вместо <P> тег <SPAN>.</p>