@Alexxxey_enot

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

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 картинка не прогрузилась.
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега Вёрстка
Нежно люблю верстку
Почитайте подробнее, что делают разные position.
В частности, relative.
Он берет элемент и сдвигает его туда куда вы скажете. Но при этом то место где элемент был до сдвига остается зарезервированным под него.
Остальные элементы выстраиваются так, как будто сдвинутый элемент остался на своем месте.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы