0

Есть два блока. С одинаковыми классами. Одному из них задал дополнительный класс, чтобы стилизовать его, при нажатии на кнопку, но это не суть. Соседний блок применяет свойство height, если я задаю только классу .seventh_block_active. Но и .seventh_block тоже принимает это свойство.

Почему так? Причем background принял только .seventh_block_active, а height .seventh_block принимает..

.seventh_block_list:before {
	font-family: 'FontAwesome';
	content: '\f00c';
	color: #6fc754;
	margin-right: 7px;
}
.seventh_block_title {
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 30px;
}
.seventh_block_price {
	border: 1px solid #d4d4d5;
	border-radius: 30px;
	padding: 5px 17px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	margin-top: 25px;
	margin-bottom: 50px;
}
.seventh_block_text {
	font-size: 20px;
	color: #8c8f94;
	margin-top: 50px;
	margin-bottom: 30px;
}
.seventh_block {
	background: #ebebed;
	padding: 60px 40px;
}
.seventh_block_list {
	font-size: 16px;
	margin-bottom: 25px;
}
.seventh_block_btn {
	padding: 5px 0 5px 0;
	width: 210px;
	border-radius: 40px;
	background: transparent;
	border: 1px solid #267df4;
}
.seventh_block_btn {
	margin-top: 50px;
	color: #267df4;
}
.seventh_block_btn_margin {
	margin-top: 99px;
}
.seventh_block {
	border-radius: 15px;
}
.seventh_block_active {
	background: #fff;
}
.seventh_block {
	margin-top: 178px;
	margin-left: 1px;
}
.seventh_blocks {
	padding: 1px;
}
<div class="seventh_blocks text-center d-flex">
    <div class="seventh_block seventh_block_active">
        <h3 class="seventh_block_title">Starter</h3>
        <span class="seventh_block_price">Free</span>
        <p class="seventh_block_text">Build your schedule<br> every day</p>
        <div class="seventh_block_list">Unlimeted events</div>
        <div class="seventh_block_list">Connect Dropbox & Evernote</div>
        <button class="seventh_block_btn seventh_block_btn_margin">Get started</button>
    </div>
    <div class="seventh_block">
        <h3 class="seventh_block_title">Pro</h3>
        <span class="seventh_block_price">$4.99</span>
        <p class="seventh_block_text">Make your life<br>
        better</p>
        <div class="seventh_block_list">Unlimeted events</div>
        <div class="seventh_block_list">Connect Dropbox & Evernote</div>
        <div class="seventh_block_list">Personal Assistant</div>
        <button class="seventh_block_btn">Make me a Pro</button>
    </div>
</div>

2
  • Вы если добавляете код, то убедитесь, что он работает и может нормально отобразить вашу проблему.
    – E_K
    Commented 8 сент. 2018 в 8:45
  • Спасибо, учту..
    – Roman
    Commented 8 сент. 2018 в 11:46

1 ответ 1

0

У блока seventh_blocks есть свойство display: flex (класс d-flex), а это значит что для блоков seventh_block устанавливается дефолтное свойство align-items: normal, которое в текущей ситуации ведет себя как stretch и подстраивает все дочерние елементы под размер родителя. И когда вы меняете высоту одному из потомков, меняется высота и родителя, что приводит к увеличению остальных потомков.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.