Making beautiful business applications

The box model – and coffee

In the previous article we looked into the basics of a table. In this article we will discuss the box model. This is one of the more challenging things to discuss, so I have my coffee ready. yay!

Image resultImage result for glass coffee cupThe coffeecup

So, you are a stylish person and love awesomely shaped things. You get hold of these amazing coffeecups from a store online. They do all that a coffeecup does and more! They are pretty and functional, and you get the see the coffee through the edge of the border.

HTML box model is similar in this regard. Your normal layout that you see does not do justice to the complexity underneath.

Looking at the image on the right, you are able to see the content in the middle. This is like the coffee itself. The container/cup is made for containing/ holding coffee. Edging on the coffee, is padding – this allows for a bit of breathing space around the edges and is normally specified in pixels (for advanced magical people, you can use things like em’s and points, but why would you do that, except to show off?!).


We also have a border. This is the edge of the cup – the end of the thing. But we are able in HTML to add a colour, border width and style to an element.

REMEMBER! If you set the width of an element, it sets it only of the content!

Having these options allows for people like us – developers and web designers to create beautiful designs with just the right amount of spacing and borders to make any design ‘pop’.


Leave a Reply

Your email address will not be published. Required fields are marked *