Верхний блок над шапкой
 
+7 (495) 021-98-78

Отступы и поля

Категории: 
13:21 - 15.02.2018
Классы, управляющие базовыми отступами

.pad

задает отступы 20px

.pad-h

задает горизонтальные отступы 20px

.pad-v

задает вертикальные отступы 20px

Пример:
<div class="pad-h inlb brd bg_light-grey">
  <div class="bg-white">.pad-h</div>
</div>
.pad-h

Классы, управляющие отступами в пикселях

.p0, .p5, .p10, .p15, .p20, .p30, .p40, .p50, .p60, .p70, .p80, .p90, .p100

задает отступы 0px, 5px и т.д. соответственно

.ph0, .ph5, .ph10, .ph15, .ph20, .ph30, .ph40, .ph50, .ph60, .ph70, .ph80, .ph90, .ph100

задает горизонтальные отступы 0px, 5px и т.д. соответственно

.pv0, .pv5, .pv10, .pv15, .pv20, .pv30, .pv40, .pv50, .pv60, .pv70, .pv80, .pv90, .pv100

задает вертикальные отступы 0px, 5px и т.д. соответственно

.pt0, .pt5, .pt10, .pt15, .pt20, .pt30, .pt40, .pt50, .pt60, .pt70, .pt80, .pt90, .pt100

задает отступ сверху 0px, 5px и т.д. соответственно

.pr0, .pr5, .pr10, .pr15, .pr20, .pr30, .pr40, .pr50, .pr60, .pr70, .pr80, .pr90, .pr100

задает отступ справа 0px, 5px и т.д. соответственно

.pb0, .pb5, .pb10, .pb15, .pb20, .pb30, .pb40, .pb50, .pb60, .pb70, .pb80, .pb90, .pb100

задает отступ снизу 0px, 5px и т.д. соответственно

.pl0, .pl5, .pl10, .pl15, .pl20, .pl30, .pl40, .pl50, .pl60, .pl70, .pl80, .pl90, .pl100

задает отступ слева 0px, 5px и т.д. соответственно

Пример:
<div class="pt10 pr20 pb30 pl15 inlb brd bg_light-grey">
  <div class="bg-white">.pt10 .pr20 .pb30 .pl15</div>
</div>
.pt10 .pr20 .pb30 .pl15

Классы, управляющие отступами в процентах

.pp5, .pp10, .pp15, .pp20, .pp30, .pp40, .pp50, .pp60, .pp70, .pp80, .pp90, .pp100

задает отступы 5%, 10% и т.д. соответственно

.pph5, .pph10, .pph15, .pph20, .pph30, .pph40, .pph50, .pph60, .pph70, .pph80, .pph90, .pph100

задает горизонтальные отступы 5%, 10% и т.д. соответственно

.ppv5, .ppv10, .ppv15, .ppv20, .ppv30, .ppv40, .ppv50, .ppv60, .ppv70, .ppv80, .ppv90, .ppv100

задает вертикальные отступы 5%, 10% и т.д. соответственно

.ppt5, .ppt10, .ppt15, .ppt20, .ppt30, .ppt40, .ppt50, .ppt60, .ppt70, .ppt80, .ppt90, .ppt100

задает отступ сверху 5%, 10% и т.д. соответственно

.ppr5, .ppr10, .ppr15, .ppr20, .ppr30, .ppr40, .ppr50, .ppr60, .ppr70, .ppr80, .ppr90, .ppr100

задает отступ справа 5%, 10% и т.д. соответственно

.ppb5, .ppb10, .ppb15, .ppb20, .ppb30, .ppb40, .ppb50, .ppb60, .ppb70, .ppb80, .ppb90, .ppb100

задает отступ снизу 5%, 10% и т.д. соответственно

.ppl0, .ppl5, .ppl10, .ppl15, .ppl20, .ppl30, .ppl40, .ppl50, .ppl60, .ppl70, .ppl80, .ppl90, .ppl100

задает отступ слева 5%, 10% и т.д. соответственно

Пример:
<div class="ppt5 ppr20 ppb10 ppl15 inlb brd bg_light-grey">
  <div class="bg-white">.ppt5 .ppr20 .ppb10 .ppl15</div>
</div>
.ppt5 .ppr20 .ppb10 .ppl15

Классы, управляющие полями в пикселях

.mm0, .mm5, .mm10, .mm15, .mm20, .mm30, .mm40, .mm50, .mm60, .mm70, .mm80, .mm90, .mm100

задает поля 0px, 5px и т.д. соответственно

.mh0, .mh5, .mh10, .mh15, .mh20, .mh30, .mh40, .mh50, .mh60, .mh70, .mh80, .mh90, .mh100

задает горизонтальные поля 0px, 5px и т.д. соответственно

.mv0, .mv5, .mv10, .mv15, .mv20, .mv30, .mv40, .mv50, .mv60, .mv70, .mv80, .mv90, .mv100

задает вертикальные поля 0px, 5px и т.д. соответственно

.mt0, .mt5, .mt10, .mt15, .mt20, .mt30, .mt40, .mt50, .mt60, .mt70, .mt80, .mt90, .mt100

задает поле сверху 0px, 5px и т.д. соответственно

.mr0, .mr5, .mr10, .mr15, .mr20, .mr30, .mr40, .mr50, .mr60, .mr70, .mr80, .mr90, .mr100

задает поле справа 0px, 5px и т.д. соответственно

.mb0, .mb5, .mb10, .mb15, .mb20, .mb30, .mb40, .mb50, .mb60, .mb70, .mb80, .mb90, .mb100

задает поле снизу 0px, 5px и т.д. соответственно

.ml0, .ml5, .ml10, .ml15, .ml20, .ml30, .ml40, .ml50, .ml60, .ml70, .ml80, .ml90, .ml100

задает поле слева 0px, 5px и т.д. соответственно

Пример:
<div class="inlb bg_light-grey">
  <div class="mt10 mb30 ml15 mr40 brd bg-white">.mt10 .mb30 .ml15 .mr40</div>
</div>
.mt10 .mb30 .ml15 .mr40

Классы, управляющие полями в процентах

.mp5, .mp10, .mp15, .mp20, .mp30, .mp40, .mp50, .mp60, .mp70, .mp80, .mp90, .mp100

задает поля 5%, 10% и т.д. соответственно

.mph5, .mph10, .mph15, .mph20, .mph30, .mph40, .mph50, .mph60, .mph70, .mph80, .mph90, .mph100

задает горизонтальные поля 5%, 10% и т.д. соответственно

.mpv5, .mpv10, .mpv15, .mpv20, .mpv30, .mpv40, .mpv50, .mpv60, .mpv70, .mpv80, .mpv90, .mpv100

задает вертикальные поля 5%, 10% и т.д. соответственно

.mpt5, .mpt10, .mpt15, .mpt20, .mpt30, .mpt40, .mpt50, .mpt60, .mpt70, .mpt80, .mpt90, .mpt100

задает поле сверху 5%, 10% и т.д. соответственно

.mpr5, .mpr10, .mpr15, .mpr20, .mpr30, .mpr40, .mpr50, .mpr60, .mpr70, .mpr80, .mpr90, .mpr100

задает поле справа 5%, 10% и т.д. соответственно

.mpb5, .mpb10, .mpb15, .mpb20, .mpb30, .mpb40, .mpb50, .mpb60, .mpb70, .mpb80, .mpb90, .mpb100

задает поле снизу 5%, 10% и т.д. соответственно

.mpl5, .mpl10, .mpl15, .mpl20, .mpl30, .mpl40, .mpl50, .mpl60, .mpl70, .mpl80, .mpl90, .mpl100

задает поле слева 5%, 10% и т.д. соответственно

Пример:
<div class="inlb bg_light-grey">
  <div class="mpt20 mpb10 mpl15 mpr30 brd bg-white">.mpt20 .mpb10 .mpl15 .mpr30</div>
</div>
.mpt20 .mpb10 .mpl15 .mpr30