Про margin и padding

[Rustick]

Cкриншот

Положение 1

Смотреть

Тут все располагается в соответствии с тем, как элементы расположены в html коде.

		<img class="listok" src="img/listok.png">
		<h1 class="enviromental">Environmental.com</h1>
		<div class="site_slogan_here">site slogan here</div>
		<div class="help_line">Help Line 24 /7 Support  1800 3246 345</div>

Положение 2

Смотреть

Через padding сдвигаю листок вниз, соответственно вместе с этим сдвигается все, что находится под листком.

Положение 3

Вариант 1

Если делать отступы для записи Environmental.com через margin, то получается, что ее можно сдвинуть на уровень листочка.

Смотреть

Вариант 2

Смотреть

Если делать такие же отступы через padding, то не получается.

Вопрос: Каким образом определяется откуда будут делаться отступы? Ведь по сути в положении 2 отступ делается через padding, потому что он и является так скажем первым ограничивающим прямоугольником. И получается "внутренний отступ". А вот уже в положении 3 никак не могу понять.

[Gaspode]

Ммм?

CSS-ные width и height определяют размеры "какого-то контента".

Edited May 7, 2011 by Gaspode

[Temiks]

+ ширина учитывает саму ширину + padding + border

Edited May 8, 2011 by Temiks

[Rustick]

Ребята, я понял из чего состоит блочная модель, и что padding - это внутренний отступ, а margin - внешний.

Если посмотреть например на Положение 3 - Вариант 1, то получается, что margin работает относительно того места, где располагается текст, то есть я задал отрицательный margin, и текст поднялся вверх.

В Положение 3 - Вариант 2. У нас нету ни margin, ни бордюра, значит сверху паддинг отсчитывается от листика, а слева от края браузера.

Получается, что границей отсчета сверху для отступа является именно листочек, то есть отступы сверху в данном случае делаются не от родительского дива, а от так скажем, того что располагается выше текста в html коде?

И все равно я запутался.

——-верхний край браузера———--1 граница———-|

——-верх листочка——————--2 граница———————

листок

——-низ листочка——————-3 граница———————-

Environmental.com (текст)

——————————-4 граница—————-

Например, работаем с Environmental.com (текст).

padding-top - это расстояние от Environmental.com, до низа листочка (3 граница)

margin-top - это расстояние от Environmental.com до верха листочка (2 граница)

Я верно написал?

[Gaspode]

Нарисуйте border или outline у каждого элемента, все вопросы должны отпасть.

[Temiks]

Нарисуйте border или outline у каждого элемента, все вопросы должны отпасть.

+1