CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
The following figure illustrates the box model.
Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border.
Margin Area: This area consists of space between border and margin. The dimensions of Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.
Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
Content Area: This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content box width and height.
- Introduction to Model View View Model (MVVM)
- CSS | box decoration break Property
- CSS | box-sizing Property
- CSS | box-shadow Property
- How to add a box-shadow on one side of an element using CSS?
- How to change the style of alert box using CSS ?
- How to Create Floating Box Effect using HTML and CSS ?
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- Sandbox Security Model
- DOM (Document Object Model)
- Model-View-Controller(MVC) architecture for Node applications
- Add the slug field inside Django Model
- AngularJS | ng-model Directive
- AngularJS | ng-model-options Directive
- Page Object Model (POM)
- JSP Access Model
- Client-Server Model
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.