Getting Grip of Boxes in CSS

Category	: CSS		Views	: 4559
Version	: 2.0		Rating	:	2.8/5 (26 votes) Currently 2.85/5 1 2 3 4 5
Type	: Text

It is a known fact that in CSS, when it comes to almost any kind of visual element, there is an imaginary box around it that surrounds it. Why does this concern us? Well, all of that extra that surrounds the element will end up taking more space on the page than its actual contents (for example when you use text or even a graphic element) would normally use. In this case all you can do is maybe add some optional padding, a border and of course, margins to that certain element, and this way expand the area.

Take a look at the image in the below – this is what a box looks like. What is a box? Now that’s easy – in this case (of course, we’re not talking about the material thing) is a virtual diagram that contains one or more linked elements. Most of the times it contains only one element. Besides the element itself the box also contains whatever padding, margin or border is added to its certain content. The image below shows exactly how they are placed.


In CSS, there are known two main types of elements:

• Block level elements – A simple example would be paragraphs. Block level elements can be easily spotted thanks to their position.
• Inline elements – Here a simple example would be . But, while block levels can be very easy spotted, inline elements are a bit harder to visualize.

Understanding how all those elements that we have just talked about (border, padding, margins, etc) interact you may find it comforting to think how paintings are hung in a gallery. The actual painting consists of the canvas area – in our case the CSS script. Think that to a painting, in order to make it stand out, you can always add an optional matte. The padding in a CSS box is very similar to a matte. The CSS border is pretty much like the frame and finally the CSS margins are similar to the distance between two paintings after you hung them. It’s actually that simple!

When it comes to width and height there are a lot of things on which these depend on. Meaning, that it is a different thing if the content is a table, or if you already set a value for the width and height properties etc. The width and the height of an element’s box is generally determined by simply adding the width/height to any left/up and right/down padding, borders or margins. In order to edit these visible (or background) style of the zones of a box you will need to use the following properties:

• For content area – In order to change the content area, go to the background property of the element.
• For padding area – In order to change the padding area, go to the background property of the element (yes, same as for content area).
• For border area – In this case you will need to go and edit the border properties of the element.
• For margin area – You will not need to edit anything since margins are all the time transparent.

As you might already know, different values can be set for top, right, left and bottom and right sides of the padding, border and margins.

Good luck!