Встроенные элементы

Влад Мержевич

Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <SPAN>, <A>, <Q>, <CODE> и др. В основном они используются для изменения вида текста или его логического выделения.

Разница между блочными и встроенными элементами следующая.

Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.
Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются.
Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ.

В примере 1 показано использование тега <SPAN> для выделения отдельных слов.

Пример 1. Применение встроенных элементов

Результат примера показан ниже (рис. 1).

Рис. 1

Рис. 1. Текст, оформленный с помощью стилей

В данном примере тег <SPAN> и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счет фонового цвета, рамки вокруг текста и сменой его цвета.

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

Пример 2. Свойство display

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Встроенные элементы</title>
<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>
</head>
<body>

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

</body>
</html>

Результат примера приведен на рис. 2.

Рис. 2

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

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

Встроенные элементы применяются не только для управления видом текста, но также и при верстке веб-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с текстом.

Пример 3. Наложение слоев

Результат примера представлен на рис. 3.

Рис. 3

Рис. 3. Положение рисунка относительно текста

В данном примере изменение положения слоя происходит за счет установки относительного позиционирования (параметр position со значением relative) с последующим сдвигом относительно исходного расположения. Для чего применяются параметры left и top. Заметьте, что первоначальное место, где была картинка, резервируется, поэтому ниже текста и рисунка имеется достаточно большой отступ.

В примере 3 можно вообще отказаться от добавления тега <DIV>, заменив его тегом <SPAN> и таким образом, полностью перейти на встроенные элементы. Полученный результат, естественно, будет отличаться своим видом, также придется несколько подкорректировать и стили (пример 4).

Пример 4. Использование тега SPAN

Результат примера показан ниже (рис. 4).

Рис. 4

Рис. 4. Положение рисунка относительно текста

За счет того, что тег <SPAN> не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.

Резюме

Встроенные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <SPAN>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счет чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

Для верстки встроенные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь встроенных элементов не допускается вкладывать контейнеры <DIV>, <P> и подобные широко распространенные теги. Тем не менее, блочные и встроенные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.

Статья опубликована: 10.02.2006

Последнее обновление: 30.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Flanker

12.04.2006

Примечание понравилось )) :
... достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.

Забавно ))

Влад Мержевич

12.04.2006

Это называется "демагогия".

shalFey

17.08.2006

никак не могу понять, почему в последнем примере образуется пустая строка вверху и почему от нее не избавиться.. я понял, что если картинку убрать, то пустой строки не будет, а все-таки почему с картинкой так?

Влад Мержевич

18.08.2006

Потому что место вверху резервируется под картинкой, а мы ее насильно опускаем вниз. За счет этого и получается пустое пространство.

shalFey

18.08.2006

ясно, спасибо!)

shalFey

18.08.2006

я тогда не понимаю, если мы можем сдвинуть картинку вниз, то почему нельзя сдвинуть желтый фон вверх? ведь эти встроенные элементы "равнозначны", ни один из них не является родителем по отношению к другому и поскольку они не блочные элементы, то ширину всей страницы не занимают. я попробовал добавить параметр "top" к "желтому фону", но никакой реакции на него, а почему так?

shalFey

19.08.2006

так.., я похоже понял. То, что я хочу получить, уже описано вами примером выше))
А получить то же, но без "добавочной" пустой линии сверху или снизу стало быть невозможно?

Влад Мержевич

21.08.2006

Указанным методом нет. Но вообще, конечно же, возможно наложить рисунок на цветной прямоугольник без лишних отступов.

Дмитрий

22.08.2006

Можно при помощи встроенных элементов распределить два куска текста на одной строке по разным сторонам.
Пусть даны два слова: "мама" и "папа". Я хочу, чтобы они находились на одной строке, слово "мама" занимало левое положение, а "папа" - правое.

Дмитрий

23.08.2006

В принципе нужного мне эффекта можно достичь при использовании таблиц, но хочется блоками...
Чтобы было примерно так:
Мама -------ЗАПОЛНИТЕЛЬ----------------- Папа

Влад Мержевич

23.08.2006

Используй несколько DIV и добавь к ним параметр float. Об этом в предыдущих статьях подробно написано.

Исмет

24.09.2006

Относительное позиционирование во всех браузерах адекватно отрабатывается?
В статьях на www.intuit.ru указывается, что этот способ позиционировния нестабилен и им лучше не пользоваться. Что Вы скажете?

Влад Мержевич

25.09.2006

Все зависит от используемого макета и уж заявлять в общем случае, что относительное позиционирование нестабильно я бы не стал.

trionix

14.10.2006

Статья супер! Кстати, ведь очень тонкий момент - разница между инлайн тегами и блочными мало где освещена! Я специально купил добротную книгу по CSS стилям, но только в этой статье узнал для себя разницу!
Спасибо, Влад!

Cypher

23.10.2006

Да, согласен с trionix - я тоже до сих пор точно не понимал разницу между div и span

Арина

02.11.2006

Вот! Как-раз то, что мне нужно было - про маму и папу

А можно вместо div использовать span? Результат тот же..

Влад Мержевич

07.11.2006

Можно и SPAN использовать, только не забывайте, что блочные элементы нельзя вкладывать в элементы встроенные.

Дафна-Глю

20.03.2007

Извините, пожалуйста, а что значит элимент overflow:

Влад Мержевич

21.03.2007

Про overflow читать здесь
http://htmlbook.ru/css/overflow.html

Сергей

17.05.2007

Попробовал относительное смещение картинки: в ИЕ6 и ФиреФоксе2 работает по-разному, не подскажите как добиться одинаковости в этих просмотрщиках?

dreamer

20.05.2007

хаками ИМХО, ff строго жив?т по стандартам W3C//DTD, a ie на них.. короче видит по-своему, (поэтому кривые js в ff не работают!)к слову) Вот сюрприз - если вы не так немного написали стиль ,например {font:Verdana 6px repeat-none} ff может проигнорировать этот стиль целиком, поэтому не удивляйтесь, что - типа я "пишу", а оно (в ff) - мне "не работает!", мне тогда очень помогает консоль ошибок в панели инструмментов))

Eugene Bores

28.09.2007

2 shelFey:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.send {
background: #d6d3a2; padding: 5px; padding-left: 55px;
}

.pic {
position: absolute; top: 0px; left: 10px;
}
</style>
</head>
<body>
<br>
<br>
<div style="position: relative">
<span class="pic"><img src="mail.gif" width="45" height="38"></span>
<span class="send">Отправить ссылку на эту статью другу</span>
</div>
</body>
</html>
Пустых мест нет!

Dr0n

17.10.2007

Очень интересно следующие:
Почему в ИЕ если ставишь, высоту (пустого) diva менее 5px то он ее все равно оставляет равной 5px (точно не скажу)? Т.е. в ишаке где то зашита минимальная высота слоя?
зы. в опере отображаеться все нормально..

Амир

06.01.2008

Влад, а как Вы спустили блок "Примечание" во 2-м примере на пару px? Если этого не сделать то разделительная полоса в любом останется. Как быть? P.S. Спасибо за проект. Каждый день кликаю по ссылкам Яндекс Директ )

Влад Мержевич

09.01.2008

Это за счет padding: 3px для слоя notetitle. Если значение padding обнулить, то получится разделительная полоса. Это особенность связана со встроенными элементами.

Jullett

13.03.2008

Влад, подскажите, неужели нет способа наложения текста поверх картинки кроме как рассчитывать по пикселям местоположение того и другого? почему нельзя в пределах этой же ячейки действовать, рисунок в <td>, тут же и текст, ну это к примеру. спасибо.

mig

29.03.2008

а прикольно с примером 2 можно поиграться

типа вкладыши...
<body>

<span class="notetitle">Примечание</span><span class="notetitle" style="padding: 0px;">Примечание2</span><span class="notetitle" style="padding: 0px;">Примечание3</span>
<p class="note">Lorem ipsum dolor sit amet...</p>

</body>

Александр

29.04.2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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: 0px; /* Убираем отступы */
white-space: nowrap; /* Запрещены переносы текста */
margin-bottom: 0px;

}

.note {
border: solid 1px #634f36; /* Параметры рамки */
background: #f3f0e9; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
margin: 0px 0px 1em 0px; /* Значение отступов */
}
.ul {
padding: 0px;
margin: 0px;

}
</style>
</head>
<body>

<ul class="ul"><li class="notetitle">Примечание</li><li class="notetitle">Замечание</li></ul>
<p class="note">Исходя из различных критериев, основными из которых являются показатели целесообразности и эффективности приложенных усилий, можно однозначно сказать следующее. А именно, что достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.</p>

</body>
</html>

как в таком случае можно изменить ширину бежевых закладок для оперы????

loly

10.06.2008

2 Александр
.notetitle {width: 300px} - не работает?

Встроенные элементы

Резюме

Комментарии к статье

Добавить комментарий