The CSS box modal is the term usually referred to for the design and layout which consists of the content, padding, border and margin.

Content Area

The content area is the space where our content such as images and text is located. It gives a rectangular shape. Its width and height are automatically set according to the size of the content. It may have an image or colour as a background. It's the most important section for without it the box modal doesn't exist.

Padding

The Padding or the padding area is the space between our content and the content border. We can set our own padding space with px or rem, according to our requirements to the top, bottom, left and right. The padding gives a distinct look to the content and makes it beautiful.

Border

The border is the layer that holds the padding and content inside it. It can be removed by setting it to none and also its thickness can be set in pixels by border width property according to our needs. The colour and design of the border can be set with its border property.

Margin

The margin section is the area between the border of a content to the other border. Margin separates a content from other different content. It helps to create white spaces around different contents to make them more appealing and distinct. Margin can be set around with px or rem, to the top, bottom, left and right.