Как сдвинуть элемент вниз?

Question

[Evgenij_nechujveter]

Есть сайт:
autolab.pro

Нужно выровнять блочки:



Использовал псевдокласс такой код:

s5__block h4:nth-child(1){
	margin-bottom: 30px;
}

Не срабатывает почему то

Comments

[Степан Крапивин]

для h4 нужно выставить фиксированную высоту. Сейчас у последних двух блоков, из-за того, что там две строки текста высота больше чем у первых двух блоков.

Answer 1

[kreoTech]

Добавить в CSS:

.s5__block h4 {
min-height: 63px;
}

Тогда заголовок будет минимум высоты 63 пикселя. Входит две строки текста. Абзацы снизу все выстроятся по линии. Если заголовок будет 3 строки, тогда этот блок сдвинется пониже остальных.

Comments

[kreoTech]

Evgenij_nechujveter, варианта два:
Либо стили в которых вы добавляете свойство не подключаются в страницу и не участвуют в задании оформления. У вас к странице вообще-то подключается минифицированная версия: autolab.pro/css/style.min.css

Либо надо поставить пробел между px и !important:
min-height: 63px !important;

[Evgenij_nechujveter]

kreoTech, спасибо, разобрался. Я был подключен через фтп, в саблайме сохранял изменения, а вот окошке filezilla нет. Спасибо еще раз)

Answer 2

[Павел]

Неправильный подход. Скорее верно так:

.s5 .col-xs-12:first-child h4 {margin-bottom:30px;}

Или

.s5 .col-xs-12:nth-child(1) h4 {margin-bottom:30px;}
.s5 .col-xs-12:nth-child(2) h4 {margin-bottom:15px;}

А в вашем коде Вы обращаетесь к каждому классу s5__block и в нем уже ищите первый h4 и применяете

Answer 3

[dom1n1k]

Проще и лучше указать для подзаголовков min-height, равный font-size * line-height * 2.