Теги DIV и SPAN
Теги <div>…</div> и <span>…</span>; используются, когда нужно применить стили к фрагменту содержимого, не включенного в отдельный тег. Сами по себе они не определяют никакого форматирования, но удобны для привязки к ним стилей. При этом DIV является блочным элементом, а SPAN – строчным. К блочным: <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.
|
