Как сместить блок в блоке? вниз например, не могу понять как это работает...?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Создание формы</title>
		<style type="text/css">
			.tabl {
			width: 500px;
			height: 500px;
			background-color: grey;
			text-align: center;
			margin: auto;
			}
			.word {
			color: red;
			margin-top: 50px;
			}
		</style>
</head>
<body>
	<div class="main">
		<div class="tabl">
			<div class="word">
				<h1>Центр!</h1>
			</div>
		</div>

	</div>




</body>
</html>

Как сместить блок "word" вниз внутри заданого блока ?

html

css

2 ответов

.word h1 { margin-top: 50px; }

тянет за собой весь блок "tabl"

Вы блок с текстом имеете ввиду? Если да, то так:

.word {
    color: red;
    margin-top: 50px;
    padding-top: 50px;  
}

т.е. просто padding-top можно добавить, чтобы внутренний отступ был. margin - это внешний отступ.