Список padding'ов и margin'ов отступов css

Список padding'ов и margin'ов отступов css - адаптивная вёрстка CSS3

Список padding'ов и margin'ов отступов css

Пример cписка padding'ов и margin'ов отступов CSS3.

 

Список-заготовка разрешений адаптивных стилей CSS3

CSS3 список вариантов

 

/* --Padding Classes-- */
.pt-10 {padding-top:10px;}
.pt-20 {padding-top:20px;}
.pt-30 {padding-top:30px;}
.pt-40 {padding-top:40px;}
.pt-50 {padding-top:50px;}
.pt-60 {padding-top:60px;}
.pt-70 {padding-top:70px;}
.pt-80 {padding-top:80px;}
.pt-90 {padding-top:90px;}
.pt-100 {padding-top:100px;}
.pb-10 {padding-bottom:10px;}
.pb-20 {padding-bottom:20px;}
.pb-30 {padding-bottom:30px;}
.pb-40 {padding-bottom:40px;}
.pb-50 {padding-bottom:50px;}
.pb-60 {padding-bottom:60px;}
.pb-70 {padding-bottom:70px;}
.pb-80 {padding-bottom:80px;}
.pb-90 {padding-bottom:90px;}
.pb-100 {padding-bottom:100px;}
.pl-10 {padding-left:10px;}
.pl-20 {padding-left:20px;}
.pl-30 {padding-left:30px;}
.pl-40 {padding-left:40px;}
.pl-50 {padding-left:50px;}
.pl-60 {padding-left:60px;}
.pl-70 {padding-left:70px;}
.pl-80 {padding-left:80px;}
.pl-90 {padding-left:90px;}
.pl-100 {padding-left:100px;}
.pr-10 {padding-right:10px;}
.pr-20 {padding-right:20px;}
.pr-30 {padding-right:30px;}
.pr-40 {padding-right:40px;}
.pr-50 {padding-right:50px;}
.pr-60 {padding-right:60px;}
.pr-70 {padding-right:70px;}
.pr-80 {padding-right:80px;}
.pr-90 {padding-right:90px;}
.pr-100 {padding-right:100px;}

/* --Margin Classes-- */
.mt-10 {margin-top:10px;}
.mt-20 {margin-top:20px;}
.mt-30 {margin-top:30px;}
.mt-40 {margin-top:40px;}
.mt-50 {margin-top:50px;}
.mt-60 {margin-top:60px;}
.mt-70 {margin-top:70px;}
.mt-80 {margin-top:80px;}
.mt-90 {margin-top:90px;}
.mt-100 {margin-top:100px;}
.mb-10 {margin-bottom:10px;}
.mb-20 {margin-bottom:20px;}
.mb-30 {margin-bottom:30px;}
.mb-40 {margin-bottom:40px;}
.mb-50 {margin-bottom:50px;}
.mb-60 {margin-bottom:60px;}
.mb-70 {margin-bottom:70px;}
.mb-80 {margin-bottom:80px;}
.mb-90 {margin-bottom:90px;}
.mb-100 {margin-bottom:100px;}
.ml-10 {margin-left:10px;}
.ml-20 {margin-left:20px;}
.ml-30 {margin-left:30px;}
.ml-40 {margin-left:40px;}
.ml-50 {margin-left:50px;}
.ml-60 {margin-left:60px;}
.ml-70 {margin-left:70px;}
.ml-80 {margin-left:80px;}
.ml-90 {margin-left:90px;}
.ml-100 {margin-left:100px;}
.mr-10 {margin-right:10px;}
.mr-20 {margin-right:20px;}
.mr-30 {margin-right:30px;}
.mr-40 {margin-right:40px;}
.mr-50 {margin-right:50px;}
.mr-60 {margin-right:60px;}
.mr-70 {margin-right:70px;}
.mr-80 {margin-right:80px;}
.mr-90 {margin-right:90px;}
.mr-100 {margin-right:100px;}

/* --Padding Classes-- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-100 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-100 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-100 {
  padding-bottom: 60px;
}
}

.pb-110 {
padding-bottom: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-110 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-110 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-110 {
  padding-bottom: 60px;
}
}

.pb-120 {
padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-120 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-120 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-120 {
  padding-bottom: 60px;
}
}

.pb-130 {
padding-bottom: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-130 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-130 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-130 {
  padding-bottom: 60px;
}
}

.pb-140 {
padding-bottom: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-140 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-140 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-140 {
  padding-bottom: 60px;
}
}

.pb-150 {
padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-150 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-150 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-150 {
  padding-bottom: 60px;
}
}

.pb-200 {
padding-bottom: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pb-200 {
  padding-bottom: 90px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pb-200 {
  padding-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
.pb-200 {
  padding-bottom: 60px;
}
}

.pt-42 {
padding-top: 40px;
}

.pt-100 {
padding-top: 100px;
}
@media only screen and (max-width: 767px) {
.pt-100 {
  padding-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pt-100 {
  padding-top: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pt-100 {
  padding-top: 90px;
}
}

.pt-110 {
padding-top: 110px;
}
@media only screen and (max-width: 767px) {
.pt-110 {
  padding-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pt-110 {
  padding-top: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pt-110 {
  padding-top: 90px;
}
}

.pt-120 {
padding-top: 120px;
}
@media only screen and (max-width: 767px) {
.pt-120 {
  padding-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pt-120 {
  padding-top: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pt-120 {
  padding-top: 90px;
}
}

.pt-130 {
padding-top: 130px;
}
@media only screen and (max-width: 767px) {
.pt-130 {
  padding-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pt-130 {
  padding-top: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pt-130 {
  padding-top: 90px;
}
}

.pt-140 {
padding-top: 140px;
}
@media only screen and (max-width: 767px) {
.pt-140 {
  padding-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pt-140 {
  padding-top: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pt-140 {
  padding-top: 90px;
}
}

.pt-150 {
padding-top: 150px;
}
@media only screen and (max-width: 767px) {
.pt-150 {
  padding-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pt-150 {
  padding-top: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pt-150 {
  padding-top: 90px;
}
}

Мобильные

Вёрстки для приложения

Суть информации отображается всегда интереснее, чем на десктопных версиях.

ДИНАМИЧНЫЕ

Интерактивные объекты

Ребрендинг и редизайн всегда ведут к усовершенствованиям и часто самое простое оказывается самым сложным.

SEO + контекст

Продажи = ГОНКИ

Без оптимизации ваш сайт никому не нужен, а продавать вы сможете используя только комплексное продвижение.

Чистый код

Не только минимизируем

Ускорение загрузки вашего сайта - это крайне необходимая мера и никуда без чистки библиотек и стилей.