Margins

This page is an overview of the Holygrail documentation and related resources.

Holygrail is a CSS and html library for building user interfaces. Learn what Holygrail is all about on our homepage .

Full Padding

Rodeando todo el elemento


p-10: (10px, 10px, 10px, 10px),
p-20: (10px, 20px, 20px, 20px),
p-30: (10px, 30px, 30px, 30px),
p-50: (20px, 50px, 50px, 50px);

VerticalPadding

Padding top y bottom

 
py-20: (10px 0, 20px 0, 20px 0, 20px 0),
py-30: (10px 0, 30px 0, 30px 0, 30px 0),
py-50: (20px 0, 30px 0, 40px 0, 50px 0),
py-60: (24px 16px,24px 16px, 24px 16px, 60px 60px),

Horizontal Padding

Padding left y right

 
px-20: (0 10px, 0 20px, 0 20px, 0 20px),
px-30: (0 10px, 0 30px, 0 30px, 0 30px),
px-50: (0 20px, 0 30px, 0 40px, 0 50px);

Top Padding

pt-

 
pt-10: (10px, 10px, 10px, 10px),
pt-20: (10px, 20px, 20px, 20px),
pt-30: (10px, 30px, 30px, 30px),
pt-50: (20px, 50px, 50px, 50px);

Bottom Padding


pb-10: (10px, 10px, 10px, 10px),
pb-20: (10px, 20px, 20px, 20px),
pb-30: (10px, 30px, 30px, 30px),
pb-50: (20px, 50px, 50px, 50px);

Left Padding

Texto interior


pl-10: (10px, 10px, 10px, 10px),
pl-20: (10px, 20px, 20px, 20px),
pl-30: (10px, 30px, 30px, 30px),
pl-50: (20px, 50px, 50px, 50px);

Right Padding

Texto interior


pr-10: (10px, 10px, 10px, 10px),
pr-20: (10px, 20px, 20px, 20px),
pr-30: (10px, 30px, 30px, 30px),
pr-50: (20px, 50px, 50px, 50px);

Margin Full

Texto interior

 
m-20: (10px, 20px, 20px, 20px),
m-30: (10px, 30px, 30px, 30px),
m-50: (20px, 50px, 50px, 50px);

Horizontal Margin

Texto interior

 
mx-10: (0 10px, 0 10px, 0 10px, 0 10px),
mx-20: (0 10px, 0 20px, 0 20px, 0 20px),
mx-30: (0 10px, 0 30px, 0 30px, 0 30px),
mx-50: (0 20px, 0 50px, 0 50px, 0 50px);

Vertical Margin

Texto interior

 
my-10: (10px 0, 10px 0, 10px 0, 10px 0),
my-20: (10px 0, 20px 0, 20px 0, 20px 0),
my-30: (10px 0, 30p 0x, 30p 0, 30px 0),
my-50: (20px 0, 50px 0, 50px 0, 50px 0);

Top Margin

Texto interior

 
mt-10: (10px, 10px, 10px, 10px),
mt-20: (10px, 20px, 20px, 20px),
mt-30: (10px, 30px, 30px, 30px),
mt-50: (20px, 50px, 50px, 50px);

Right Margin

Texto interior

 
mr-10: (10px, 10px, 10px, 10px),
mr-20: (10px, 20px, 20px, 20px),
mr-30: (10px, 30px, 30px, 30px),
mr-50: (20px, 50px, 50px, 50px);

Bottom Margin

Texto interior

 
mb-10: (10px, 10px, 10px, 10px),
mb-20: (10px, 20px, 20px, 20px),
mb-30: (10px, 30px, 30px, 30px),
mb-50: (20px, 50px, 50px, 50px);

Left Margin

Texto interior

 
ml-10: (10px, 10px, 10px, 10px),
ml-20: (10px, 20px, 20px, 20px),
ml-30: (10px, 30px, 30px, 30px),
ml-50: (20px, 50px, 50px, 50px);