What are Margins, Borders and Padding?

Understanding all of these is essential in web design as these different properties let us see how content will appear on our webpage. Content can be made up of either text or images. What's neat about all of these is that they are all measured in pixels and you can adjust the setting for each side of an element (top, right, bottom and left). In my blog today, I'll be using our friend Arnold (below) as our content and will include a screenshot of what each property looks like when coding.

What is padding?

Padding is the amount of space around specific content on a page. In the picture below, the blue fill around Arnold indicates the padding around him. Padding is always transparent and is measured in pixels.

What are borders?

The border goes around the content and the padding. Like padding, borders are also measured in pixels but it has another property you can identity it with. You can set the width, changing how thin or thick the border can be. The border line can be a solid line, a dashed line and can be a specific color or transparent. Here the border is demonstrated by the colour black and a thick line.

What are margins?

The margin is the space outside of the border. Margins are always transparent and provide space in between the content and anything that sits around it. In our example, it is highlighted by the colour green. Margins and padding get confused often. Margins are the space outside of the border, whereas padding is the space around the actual content and is inside the border. Margins can be in pixels or as a percentage.