CSS Basics Web development basics

CSS box model

In HTML,CSS box model refers to design and layout of elements. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

CSS box model

Parts of CSS box model

  • Content-The area where the text and images appear is the content area. Text and images are referred to as content.
  • Padding:Clears an area around the content. The padding is transparent. The space between the padding and the content edge can be controlled using the padding-top, padding-right, padding-bottom, padding-left and the shorthand padding CSS properties.

    Read more about padding
  • Border:A border that goes around the padding and content.Border property allows to add borders to an element and also control spaces between content and border:

    Showing borders

    Read more about borders

  • Margin – Clears an area outside the border. The margin is transparent.The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.

    The size of the margin area is controlled using the margin-top, margin-right, margin-bottom, margin-left and the shorthand margin CSS properties.

    Hi, i am div 1
    Hi, i am div 2

    Read more about margins