AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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


Встроенные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через аргумент 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>

<br><h1>Замена блочного элемента на встроенный</h1><br>

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

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


.

© Copyright 2008-2016 by KDG