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