CSS Frame models (box model)

CSS Frame models (box model)

All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, which include: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the box model:

Description of different parts:

• Margin -Clears the border area. Margin has no background color, it is completely transparent

• Border -padding and content around the border. The border is affected by the background color of the box

• Padding -Clears the area around the content. Is affected by the background color of the fill in the box

• Content-The contents of the box, displaying text and images

Excerpt from: W3cschool

Http://www.w3cschool.cc/css/css-boxmodel.html

--------------------------------------------------------------------------------------------------------------- ----------------

Boxmodule is like a courier package:

Margin: Express Plastic Packaging

Border: Express Carton

Padding: A layer of foam board that adheres to the inner wall of the carton

Content: Your Stuff

CSS Frame models (box model)