Css Box Model

Using Margin, Padding and Border

Especially when designing without tables using divs, box properties should be adjusted very well.

A common mistake is to simply add the width properties when calculating the total width of the boxes placed next to each other.

It is very important to understand that the width property is the width of the writable area inside a tag. Width does not include borders and space occupied by inner and outer spaces.

For example, we should calculate the total width that a box will occupy on the screen as follows:

Total width = width + margin (left and right ) + padding (left and right) + border (left and right) 

margin

It is the outer space around the box. That is, it sets the space to be left between the objects around the box and the box's border.

padding

It is the inside space of the box and determines how far the objects inside the box are from the border.

border

Used to determine the thickness, style, and color of borders.

The thickness, style and color of all borders can be specified in one line, using something like :

To style the right, left, top, and bottom borders differently:

To change the color of all borders:

To make the thickness of all borders different:

features are used.

The following is used to set the style, thickness and color of any of the borders at once:

As you know, when a border is given to a table, two lines are formed, inside and outside. If we want to prevent this and want the table and cell borders to consist of a single line, we can use the following css expression:

Example: How many px does a box with the following properties occupy in total?

Total Width: 250 + 8 + 8 + 5 + 0 + 1 + 1 = 273px

Example : If the box whose properties are given below should occupy a total area of ​​400px, what should be the maximum width of the content?

Width: ?

Width = 400 – ( 10 + 5 + 7 + 7 + 0 + 0 ) = 400 – 29 = 371px

EXERCISES