BOX MODEL

css3

We introduce the topic “The box model in CSS” by saying that everything in CSS is surrounded by a box and understanding these boxes is the key to being able to create layouts with CSS or to align elements with other elements. In this lesson we will take a proper look at the CSS Box Model so that you can create more complex layout tasks with an understanding of how it works and the terminology related to it.

box-model

EXPLANATION OF THE BOX MODEL

Explanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – This is an area around the content. The padding is transparent
  • Border – A border that surrounds the padding and content
  • Margin – This is an area outside the border. The margin is transparent

The box model allows us to add a border around the elements and define the space between the elements.

WIDTH AND HEIGHT OF ONE ELEMENT

To correctly set the width and height of an element in all browsers, you need to know how the box model works.

Important: When setting the width and height properties of an element with CSS, you just need to set the width and height of the content area. To calculate the full size of an element, padding, borders, and margins must also be added.

The total width of an element should be calculated like this:

  • Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

  • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS BORDERS

The CSS border properties allow us to specify the style, width and color of an element’s border. The border-style property specifies the type of border to display. The following values are allowed:

  • dotted – Defines a dotted border
  • dashed – Defines a dashed border
  • solid – Defines a solid border
  • double – Defines a double border
  • groove – Defines a 3D groove border. The effect depends on the color value of the border
  • ridge – Defines a 3D ridge border. The effect depends on the color value of the border
  • inset – Defines a 3D border. The effect depends on the color value of the border
  • outset – Defines a 3D outer border. The effect depends on the color value of the border
  • none – No border
  • hidden – Defines a hidden border

The border-style property can have one to four values (for the top border, right border, bottom border, and left border).

CSS BORDER WIDTH

The border-width property specifies the width of the four borders. The width can be set as a specific dimension (in px, pt, cm, em, etc.) or by using one of three predefined values: thin, medium, or thick. The border-width property can have one to four values (for the top border, right border, bottom border, and left border):

CSS BORDER COLOR

The border-color property is used to set the color of the four borders.

Color can be set by:

  • name – specify a color name, such as “red”
  • HEX – specifies a HEX value, such as “# ff0000”
  • RGB: Specifies an RGB value, such as “rgb (255,0,0)”
  • HSL – specifies an HSL value, such as “hsl (0, 100%, 50%)”
  • transparent

Note: If the border color is not set, it inherits the color of the element.

The border-color property can have one to four values ​​(for the top border, right border, bottom border, and left border).

SIDES OF THE CSS BORDERS

In CSS there are also properties to specify each of the borders (top, right, bottom and left).

If the border-style property has four values:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

If the border-style property has three values:

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

If the border-style property has two values:

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

If the border-style property has a value:

  • border-style: dotted;
    • all borders are dotted

ROUNDED BORDERED CSS

The border-radius property is used to add rounded edges to an element.

Border

MARGIN

Margins are used to create space around elements, outside of any defined edges. CSS has properties to specify the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

All margin properties can have the following values:

  • auto – the browser calculates the margin
  • length – specifies a margin in px, pt, cm, etc.
  • % – specifies a margin in% of the width of the containing element
  • inherit – specifies that the margin is to be inherited from the parent element

Tip: Negative values ​​are allowed.

To abbreviate the code, you can specify all margin properties in a property. The margin property is a shortened property for the following individual margin properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

If the margin property has four values:

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

If the margin property has two values:

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

If the margin property has only one value

  • margin: 25px;
    • All margins are 25px.

PADDING

Fill is used to create space around the content of an element, within any defined border. With CSS, you have full control over the padding. There are properties to set the padding for each side of an element (top, right, bottom and left).

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All padding properties can have the following values:

  • Length – specifies padding in px, pt, cm, etc.
  • % – specifies a fill in% of the width of the containing element
  • inherit – specifies that padding is to be inherited from the parent element

Note: Negative values ​​are not allowed.

To abbreviate the code, you can specify all padding properties in a property. It is a shortened property for the following individual padding properties:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

So here’s how it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

If the padding property has three values:

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

If the padding property has two values:

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

If the padding property has a value:

  • padding: 25px;
    • all paddings are 25px

WIDTH PROPERTY

The CSS width property specifies the width of the element’s content area. The content area is the portion within the padding, border, and margin of an element (the box model). Then, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an unwanted result. You can use the box-sizing property. This causes the element to keep its effective width; if you increase the fill, the space available for content will decrease. In the code there are examples of the box-sizing property.

 

HEIGHT AND WIDTH

width and height
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB