Мой Справочник | CSS | Строчные элементы

HTML:


				<div class="display">

				    <span class="box"></span>

				    <span class="box"></span>

				</div>

CSS:


		.box {

		    display: inline;/*по ум.*/

		    background-color: maroon;

		    border: 1px solid orange;

		    color: white;

		    margin-bottom: 5px;/*не реагируют*/

		    height: 50px;/*не реагируют*/

		    margin-right: 10px; /*(+ пробелы учитываются)*/

		    padding-right: 10px; 

		    padding-top: 10px; /*фон увеличивается, но контент не отодвигает*/

		}

BOX BOX

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

Для строчных элементов лучше не задавать вертикальных отступов, т.к. они ведут себя непредсказуемо.

Если заFLOATить строчный элемент, то он станет БЛОЧНЫМ

Строчные элементы применяют:

Оформление частей текста
Контейнеры для небольших текстовых фраз (<span>)

Границы строчных элементов полностью реагируют на padding, но вертикальный padding не отталкивает другие элементы, выпадает из потока

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text