2015-09-07
271
Теги <div>…</div> и <span>…</span> используются, когда нужно применить стили к фрагменту содержимого, не включенного в отдельный тег. Сами по себе они не определяют никакого форматирования, но удобны для привязки к ним стилей. При этом DIV является блочным элементом, а SPAN – строчным.
Основное различие между блочными и строчными элементами заключается в следующем: строчные элементы идут друг за другом в строке текста, а блочные – располагаются один по другим. К строчным элементам относятся такие теги, как <a>, <img>, <input>, <select>, <span>, <sub>, <sup> и др.
К блочным: <div>, <form>, <h1>…<h6>, <ol>, <p>, <table>, <ul> и некоторое другие. Рассмотри различие на примере. Для тега <span> указано стилевое правило, задающее цвет фона. Для тега <span> указано стилевое правило, задающее цвет фона.
HTML-код:
<span style="background-color: #eeeeee">Строчные элементы</span>
<sub>располагаются</sub>
<img src="v_stroke.gif" alt="в строке">
<sup>и идут друг за другом.</sup>
Пример для блочных тегов:
<html>
<head>
<title>Блочные элементы</title>
<style>
H3, DIV, TABLE {
border: black dotted 1px;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Заголовок</h3>
<div>Содержимое <div>
<div>Вложенный <div> №1</div>
<div>Вложенный <div> №2</div>
</div>
<table>
<tr><td>Таблица из одной ячейки</td></tr>
</table>
</body>
</html>
Блочные элементы располагаются друг под другом, многие занимают всю возможную ширину. Блочные элементы могут включать в себя строчные и другие блочные. Но строчные элементы не могут содержать блочные!
Еще одним отличием является то, что для строчных элементов не работают такие свойства, как margin-top, margin-bottom, padding-top и paddingbottom. Исключением являются теги <img>, <input>, <textarea> и <select> – для них можно задавать отступы padding-top и paddingbottom.
