Замена блочного элемента на строчный

Строчные элементы можно превращать в блочные с помощью свойства display: block;. Также возможно и обратное действие через аргумент display: inline;.

Примечание

В данном примере блочный тег <p> отображается на веб-странице как строчный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять <p> в виде строчного элемента. В принципе, можно вместо <p> использовать тег <span>.

Исходный код этого примера:

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

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