Что делать если для кнопки не применяется нижний margin?

Question

[Alexxxey_enot]

https://yadi.sk/i/1NpxdQ3FoW3jTQ

<div class="intro">
		<div class="container">
			<div class="intro__inner">
				<h1 class="intro__title">Builder.io</h1>
				<div class="intro__subtitle">Builder.io lets you generate unique HTML website templates talloried for desigers.</div>
				<a href="#" class="btn">Sign Up</a>
			</div>
				<div class="pic">
					<div class="pic__inner">
						<img src="assets/img/forest.png" alt="">			
					</div>		
				</div>
			</div>
		</div>
	</div>

.intro{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background: url("../img/builder.jpg") center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

.intro__inner{
	position: relative;
	top: 100px;
	width: 100%;
	max-width: 756px;
	margin: 0 auto;

}

.intro__title{
	margin: 0 auto;
	font-family: 'Sintony';
	font-weight: 400;
	color: #fff;
	font-size: 60px;
	text-align: center;
}

.intro__subtitle{
	font-family: 'Sintony';
	font-weight: 400;
	font-size: 19px;
	color: #d9caf3;
}

.btn{
	padding: 20px 70px;
	display: inline-block;
	vertical-align: top;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;

	margin: 30px 268px 50px;
	font-size: 16px;
	color: #ffffff;
	background: #4bd9dc;
}

.pic__inner{	
	max-width: 920px;
	height: 540px;
	width: 100%;
	margin: 0 auto;
}

P.S картинка не прогрузилась.

Answer 1

[Ankhena]

Почитайте подробнее, что делают разные position.
В частности, relative.
Он берет элемент и сдвигает его туда куда вы скажете. Но при этом то место где элемент был до сдвига остается зарезервированным под него.
Остальные элементы выстраиваются так, как будто сдвинутый элемент остался на своем месте.

Т.е. вы сдвинули .intro__inner ниже на 100 точек. И он сдвинулся, всё ок.
И margin от кнопки тоже сработал.
Только .pic ничего не знает об этом сдвиге.

Если вам нужен отступ между container и intro__inner, задайте padding для container.
Никаких предпосылок для использования relative в этом месте нету.

Comments

[Ankhena]

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