Как обнулить margin-bottom?

Question

[Юра]

Привет, превью к статьям выводятся в виде плитки с пагинацией по 9 штук на странице, у плиток такой код:

.articlecon     { position:relative; float:left; border:1px solid #DEDEDE; border-radius:2px; background:#FFFFFF; width:31.66%; height:546px; margin-left:2.5%; margin-bottom:2.5%; text-align:left; padding:0 30px 20px 30px; overflow:hidden; box-sizing:border-box;}
.articlecon:first-child        { margin-left:0;}
.articlecon:nth-child(3n+4) { margin-left:0;}

я пытаюсь обнулить нижний отступ у последних плиток:
.articlecon:last-child { margin-bottom:0;}

если на странице 4 или 7 плиток, то код работает, а если на странице, 5, 6, 8 или 9 плиток, то есть в нижней строке более 1 плитки то условие .articlecon:last-child { margin-bottom:0;} не работает.

Comments

[Ankhena]

Потому что если в последней строчке несколько элементов, то у последней вы отступ обнулили, а у предпоследней нет. Вот визуально он и остается.
Или что вы имеете в виду под словами "не работает"?

Answer 1

[Егор Живагин]

Да ну делайте просто через margin-top и убирайте его у первых элементов через nth-child
Костыль немного, но адекватный.

Comments

[Юра]

Да, как вариант, чё сам не додумался, и наверно меньше нагрузки чем через JS высчитывать. Только почему костыль? Потому, что при загрузке страниц надо избегать margin-top или почему?

Answer 2

[Alexander Pushkarev]

last-child работает для последнего элемента, а не для всех. Считайте элементы через js и там уже обнуляйте

Answer 3

[Александр]

last-child - это один единственный последний элемент, но и то, не обязательно одного типа. А вам нужно обнулять отступ не одному, а всем в последнем ряде. То есть, это может быть и один, может быть и три элемента.
Предлагаю просто заключить их во внешний родительский блок и сделать ему отрицательный нижний отступ в размере отступа блоков:

margin-bottom:-20px;  // если оступ у плиток в 20пикс.