CSS Concept Article

Knowing the difference between margin, border, and padding is extremely important. Particularly when trying to lay content on a page and understanding why things are, or more likely, are not doing what you want them to do.

I picked this topic as it regularly leads me to lots of frustration. Even today when building this blog page!

Lets start with margin! Margin is the space around an element and is most commonly used for spacing! Margin will also be consolidated, for example if you have bottom margin 10px and top margin 5px they will combine into 10px.

Next is border. Border is a styled space that surrounds an element, borders can be any range of colours and styles. Solid, dotted, dashed, you name it! I sometimes use temporary borders to help when placing things to give me a better idea of whats going on.

Lastly is padding. Padding is the space inside an element. When you increase padding you are increasing the 'size' of the element. Padding increases the click box of things like links and will extend any background colour attached to an element.

Diagram of margin, border and padding.

I hope you learnt something new! Or atleast that other people struggle with margins, borders, and padding.

If you would like to read more on this topic I encourage you check out these links!