CSS Layout
This page demonstrates CSS Layout techniques
Flexbox
cheese
cool
swag
bruh
yup
uh
ok
VHS
These words are organized using flexbox
Float
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
The above image is floated to the left of the text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
The above image is floated to the right of the text
Padding
This text has a padding of 20px
The above text has a padding of 20px utilizing the padding property
Margin
This text has a margin of 25px
This text has a margin of 50px
This text has a margin of 100px
The above texts have varrying margins using the margin property
Border
This text has a solid border
This text has a dashed border
This text has a dotted border
The above texts have different borders through the border property
Grid
ʕ•ᴥ•ʔ
(• ε •)
ಥ_ಥ
ಠ益ಠ
͡° ͜ʖ ͡°
The above grid is made utilizing the grid container