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

И так, это теги

Какая между ними разница, если используются они для одного и того же?

Элемент div - это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).

Элемент span - это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).

Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.

Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к

Первое с чего хотелось бы начать это с позиционирования элементов.

Это свойство:

position — устанавливает или определяет позицию элемента.

Значения:

static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.

absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.

left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.

Значения:

x – число в процентах или пикселях.

auto — значение по умолчанию.

Рассмотрим пример:

XHTML

Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и влево на 200px, относительно того места, в котором он появится по умолчанию.

Следующее важное свойство:

margin – величина отступа от нашего блока до соседних объектов с четырех сторон.

Значения:

margin-top — задает величину верхнего отступа объекта

margin-left — задает величину левого отступа объекта

margin-right — задает величину правого отступа объекта

margin-bottom — задает величину нижнего отступа объекта

XHTML

Мы создали блок с отступами вокруг него по 30px от всех его сторон.

Над чем хотелось бы остановиться еще:

padding – свойство задает величину пространства, вставляемого между объектом и его границами.

Значения:

padding-bottom — задает величину пространства, вставляемого между объектом его нижней границей.

padding-left — задает величину пространства, вставляемого между объектом его левой границей.

padding-right - задает величину пространства, вставляемого между объектом его правой границей.

padding-top - задает величину пространства, вставляемого между объектом его верхней границей.

XHTML

Мы создали блок с отступами по 30px от содержимого до всех его сторон.

И рассмотрим пример с использованием тэга :

Допустим, у нас есть конструкция вида:

Любой текст!

Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тег и применим соответствующие стили.

Элементы из предыдущей главы выводятся последовательно на одной горизонтальной строке. Они ведут себя как обычный текст и просто отображаются рядом друг с другом, даже если они имеют определённые размеры и другие свойства, которые не относятся к тексту. Это не должно удивлять, так как , и - элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь <a href="/nastroika-faila-podkachki-windows-7-nachalnaya-pravilnye-razmery-faila-podkachki/">разные размеры</a>, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.</p><p>Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как <div> и это своего рода «перенос» содержания на новую строку (вроде разрыва страницы или разрыва строки в текстовых редакторах).</p><p>Чтобы увидеть как работают элементы <div> используем три из них и установим для них ширину, высоту и фон.</p><p>Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.</p><p> <div class="container"></div> <div class="container"></div> <div class="container"></div> </p><p>В CSS мы пишем класс .container , который связан с тегом <div> .</p><p>Container { width: 200px; height: 200px; background-color: blue; } </p><p>Посмотрим на это в браузере.</p><p>Похоже на один большой прямоугольник. Как насчёт отделить теги <div> друг от друга?</p><p>Container { width: 200px; height: 200px; background-color: blue; margin-bottom: 10px; } </p><p>Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.</p><p>В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:</p><ul><li>inline (строчные);</li><li>block (блочные);</li><li>inline-block (строчно-блочные).</li> </ul><p>Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле <textarea> может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.</p><ul><li>Строчные - , <span><em> , <strong> </li><li>Блочные - <div> , <p> , <article> </li><li>Строчно-блочные - <input> , <textarea> </li> </ul><p>По умолчанию, у строчных элементов стилевое свойство display установлено как inline . Для блочных элементов его значение block , а для строчно-блочных элементов inline-block . Теперь вы можете объяснить, из-за чего тег <span> не переносит текст на новую строку. Потому что это строчный элемент, а значит в CSS у него свойство display установлено как inline . С учётом этого код ниже:</p><p>Один два три </p><p>Браузер отобразит в одну линию:</p><p>один два три</p><p>Однако можно изменить это поведение, добавив одну строку в CSS:</p><p>Span { display: block; } </p><p>Теперь наши теги <span> отображаются иначе, каждый из них начинается с новой строки, поскольку мы установили свойство display как block .</p><p>Для этого примера мы используем <div> . Вы можете поинтересоваться, что этот тег описывает в документе. Краткий ответ: ничего. Мы используем тег <div> в тех случаях, когда все другие теги не подходят для использования того, что мы вложили в документ. В общем случае тег <div> (в сочетании с разными классами) применяется для получения различных визуальных эффектов, в результате у него нет функции для описания содержимого. К примеру, если вы желаете сделать три вертикальных колонки на сайте, то, возможно, потребуется элемент, который может разделить некоторые строчные или строчно-блочные элементы.</p><p>Вообще, хорошей идеей будет не злоупотреблять тегом <div> , если это возможно.</p><p>С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.</p><p> <form> <div> <label for="nickname">Ваше имя:</label> </div> <div> <input type="text" id="nickname" name="nickname"> </div> <div> <label for="user-email">Ваш e-mail:</label> </div> <div> <input type="email" id="user-email" name="user-email"> </div> <div> <label for="content">Содержание:</label> </div> <div> <textarea rows="10" cols="50" id="content" name="content">