Blog/ Sprint 2 Tech

CSS: Margins, Borders, and Padding

A margin is the space around an element’s border

Think of the margin as a forcefield that keeps other things away. With negative numbers, this can be reversed to bring them closer or even overlap.

For example, this is what this page is currently set to:

If I change the top margin to a negative number, like this:

Then this element removes space at the top, overlapping other elements:

Borders wrap around both content and padding.

Think of borders as an invisible divider between the margin and padding. They are invisible by default and can be made visible if desired.

Here is an example of an image with a border:

This border was added with the following code:

If I add the padding to the image:

The border expands to the size of the content and padding, like so:

Padding is the space inside an element's border.

Think of padding as the space you have insight of your blanket fort. Do you want it to be tight around you or do you want room to stretch?

take this image, for example. the current padding can be seen below:

If we wanted there to be more space on either side of the image, we can increase the padding like so:

and this will increase the space between the image and the border, on both sides: