Как отступить сверху от элемента, у которого задан стиль float

Admin CSS

Если верхний элемент имеет свойство float:left или float:right, то следующий за ним элемент отказывается создавать отступ margin. Ниже о том, как решить такую проблему.

Даже, если поставить большой отступ и выставить свойство !important, результата не будет:

Решение 1

Можно между этими двумя элементами поставить пустой элемент div, со свойством:

clear:both;

Решение 2

Применить ко второму объекту свойство:

display: inline-block;

Обычно этого достаточно, но бывает необходимо добавить и другие свойства:

float: none;
clear:both;

Минусом второго варианта является то, что перестаёт работать центровка:

margin: 40px auto;
width: 80%;

Однако её можно заменить на мнимую (отступить с двух сторон), хотя это не так удобно, если дизайн предполагает адаптивную вёрстку:

margin: 40px;

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Как отступить сверху от элемента, у которого задан стиль float"