BLEU

CSS uses the box model to organise spaces in and around an HTML element like a paragraph or an image or even an entire article! Understanding how margins, borders and padding works is really useful when designing a webpage.

I've seen a lot of box model diagrams, but the squares and lines get me all confused! So I thought I'd explain the box model using something a little different...

I’ve just bought this amazing print of Mary V by Ladyist and I can’t wait to put it on the wall. Let’s learn about the CSS properties of Margins, Borders and Padding and apply these to hanging this photo.

Borders

So, the print has arrived and I’m looking at it and thinking ‘this is wonderful, I’m so excited to have this in my home’. I’m a forward planner and you’ve already purchased a frame!

For my frame, I use a CSS border. The border property puts a line around all four sides of a selected element. You have the ability to style your border, but by default, this is a solid black line.

I’m a ‘trust the default’ kind of person, so I bought a default frame:

Aww dang it! It’s the right size, but it’s too thin and black isn’t right for this image. It’s okay. We’ll replace it with something better.

With CSS borders, you’ve got some options. First, think about what style you want your border to be. This property is suitably named border-style. It could be dashed, double lined, or other styles, but I prefer a classic solid line.

Then, you need to think about how thick you want the borderline to be. This property is called border-width. I measure this in pixels, but you can check out more info about measurement types and other fun things to do with your border here. By default, the border-width property is set to medium.

After you’ve considered your style and thickness you get to choose a colour! Suprise surprise, this property is called border-color! Pick a colour, any colour.

I’ve gone for a 10px wide solid pink border but you can be creative and follow your heart. I can write my three properties long ways…

Or short ways! The trick is to ensure you include the style property value. The other properties can use their default value, but you must specify the style value, otherwise your border will no-show.

Great work! We now have a border that suits our image. Remember, a border runs along the sides of your element’s content. This could be text, an image, an entire div, or something else.

Padding

If we want to add some negative space within the border we can do that with the CSS property padding. Padding creates space around an element on the inside of its border.

You can think of padding like the blubber of a seal. The skin of the seal (the border) is on the outside, then you have the useful blubber (padding) to keep that little seal nice and warm, and on the inside you have the element itself - the seal’s organs and stuff. If the seal gains or loses some of the blubber, the skin will stretch or shrink to fit. The border does the same with different levels of padding.

Let’s add some padding to make this portrait stand out.

Padding values are completely customisable. Each side can be the same, or different, or match another one of the sides. You can format this using individual properties (padding-left, padding-right etc. see below) or you can use the padding property on its own and follow the below cheat sheet.

See above - now we have 20px of padding on the top and 10px to the right of our element.

Nice! Now you can add padding around your objects. Let’s add a suitable amount of padding around this photo and let’s make the object’s background a little more colourful. Our padding is transparent, so the background-color will appear in the negative space made by the padding.

Wow, it’s a pastel daydream! It’s time to hang this baby on the wall!

Margins

We’ve all come across margins before. Whether you’ve printed something and the printer has cut off some of your work, or you got lashed at by a cat when you broke into its personal bubble. Margins are familiar to us.

Margins are the spaces between objects. The space between the printable area of the page and the physical edge of the page. The space your hand travels from the safe zone through the danger zone and into the scratched-hand zone. It’s just the same with the CSS margin property.

Note: the margin begins at the outer edge of the border, and goes outwards for as far as you tell it to.

This property is a useful design tool! You can nicely space things out on your page so that nothing feels cramped or awkward.

Writing the measurements for margins follows the same rules as for padding You can write each side individually, or use the cheat sheet to do a snazzy and speedy one-liner.

There’s something funny about margins though… Sometimes when they meet on the vertical (margin-top and margin-bottom), the margin with the larger value is the margin that rules the space between! That’s another post though, and MDN has a great one. Here’s the link. Thanks MDN!

I’ve added another photo to my new photo wall so that we can look at how the margin property works. You can only see the border and padding of the second image, but it serves to show how margins work. Make sure you read the code notes!