Version: 1.1
hypetech.pl
Układ treści

Odstępy

Klasy pozwalające na ustawianie odstępów między elementami (maring, gap) oraz wenątrze elementu (padding)

margin

Ustawianie marginesów elementu

Klasa Styl CSS
m-auto 
margin: auto;
m--<var> 
margin: var(--<var>);
m-<dim> 
margin: <dim>;
mx-auto 
margin-left: auto;
margin-right: auto;
mx--<var> 
margin-left: var(--<var>);
margin-right: var(--<var>);
mx-<dim> 
margin-left: <dim>;
margin-right: <dim>;
my-auto 
margin-top: auto;
margin-bottom: auto;
my--<var> 
margin-top: var(--<var>);
margin-bottom: var(--<var>);
my-<dim> 
margin-top: <dim>;
margin-bottom: <dim>;
mt-auto 
margin-top: auto;
mt--<var> 
margin-top: var(--<var>);
mt-<dim> 
margin-top: <dim>;
mb-auto 
margin-bottom: auto;
mb--<var> 
margin-bottom: var(--<var>);
mb-<dim> 
margin-bottom: <dim>;
ml-auto 
margin-left: auto;
ml--<var> 
margin-left: var(--<var>);
ml-<dim> 
margin-left: <dim>;
mr-auto 
margin-right: auto;
mr--<var> 
margin-right: var(--<var>);
mr-<dim> 
margin-right: <dim>;

padding

Ustawianie odstępów wewnątrz elementu

Klasa Styl CSS
p-auto 
padding: auto;
p--<var> 
padding: var(--<var>);
p-<dim> 
padding: <dim>;
px-auto 
padding-left: auto;
padding-right: auto;
px--<var> 
padding-left: var(--<var>);
padding-right: var(--<var>);
px-<dim> 
padding-left: <dim>;
padding-right: <dim>;
py-auto 
padding-top: auto;
padding-bottom: auto;
py--<var> 
padding-top: var(--<var>);
padding-bottom: var(--<var>);
py-<dim> 
padding-top: <dim>;
padding-bottom: <dim>;
pt-auto 
padding-top: auto;
pt--<var> 
padding-top: var(--<var>);
pt-<dim> 
padding-top: <dim>;
pb-auto 
padding-bottom: auto;
pb--<var> 
padding-bottom: var(--<var>);
pb-<dim> 
padding-bottom: <dim>;
pl-auto 
padding-left: auto;
pl--<var> 
padding-left: var(--<var>);
pl-<dim> 
padding-left: <dim>;
pr-auto 
padding-right: auto;
pr--<var> 
padding-right: var(--<var>);
pr-<dim> 
padding-right: <dim>;

gap

Ustawianie odstępów między elementami w grid oraz flex.

Klasa Styl CSS
gap--<var> 
gap: var(--<var>);
--column-gap: var(--<var>);
--row-gap: var(--<var>);
gap-<dim> 
gap: <dim>;
--column-gap: <dim>;
--row-gap: <dim>;
gapx--<var> 
gap: var(--<var>);
--column-gap: var(--<var>);
gapx-<dim> 
gap: <dim>;
--column-gap: <dim>;
gapy--<var> 
gap: var(--<var>);
--row-gap: var(--<var>);
gapy-<dim> 
gap: <dim>;
--row-gap: <dim>;