- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Understanding CSS Box Model
Each element in an HTML document is treated as a rectangular box by CSS. This is the default layout scheme and can be customized as per our requirements. The positioning of elements, their content, and their surrounding elements are done following the box model of CSS.
To begin with, let’s start with the layout of the box model as shown in the following image.
Source: w3.org
Content
This includes the actual data in the form of text, image or other media content. The width and height properties modify the dimensions of this box.
Padding
The space between the outer edge of the content and its border refers to padding. This box can be resized by the padding property. Edge-specific properties like padding-left, padding-bottom, etc. help in achieving custom spacing.
Border
The distance between the outer edge of the padding and the inner edge of the margin defines the border of an element. By default, its width is set to 0. The border property is used to define an element’s border. Individual edges can also be styled.
Margin
The space between an element’s box and its surrounding elements’ box is defined as margin. This is analogous to the page margin which is defined as the space between the edge of a page and its content. It is transparent in color, simulating properties of padding, except that it clears area outside the element’s border. Like padding, the individual edges can be defined to have a custom margin.
Example
Consider the following example −
<!DOCTYPE html> <html> <head> <style> div { margin: 25px; padding: 35px; width: 200px; background-color: lightseagreen; border: 20px dashed indianred; } </style> </head> <body> <div> Content demo box<br/> </div> </body> </html>
Output
This produces the following output −
Here, we have defined the size of the <div> element in its CSS specification. The total width of this element is 360px which is calculated as follows −
width + (left+right)padding + (left+right)border + (left+right)margin = 200 + (35+35) + (20+20) + (25+25) px = 360px
Although it may appear that margin and padding just add extraneous space and add up to the element’s total width, it has found various applications in making the webpage responsive. The box model helps to position the elements in a better way.
Example
The following examples illustrate the CSS box model −
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 35px; width: 80px; box-shadow: inset 0 0 22px indianred; border-radius: 50%; } div > div { padding: 0 0px 100px 0px; border-radius: 3%; box-shadow: inset 0 0 22px seagreen; } </style> </head> <body> <div> <div></div> </div> </body> </html>
Output
This gives the following output
Example
<!DOCTYPE html> <html> <head> <style> #demo { width: 350px; display: flex; float: left; border: 6px solid black; border-radius: 6%; } .d1 { margin-left: 20px; width: 150px; height: 80px; box-shadow: 0 0 0 4px mediumslateblue; box-sizing: border-box; border-radius: 36%; } .d2 { width: 150px; height: 80px; padding: 30px; box-shadow: 0 0 0 4px darkred; box-sizing: border-box; border-radius: 36%; } </style> </head> <body> <div id="demo"> <div class="d1"></div> <div class="d2"></div> </div> </body> </html>
Output
This gives the following output −
- Related Articles
- Define the CSS Box Model
- What is Box Model in CSS?
- Understanding CSS Units
- Understanding CSS Visual Formatting
- Understanding CSS Positioning Methods
- Understanding the Flex Layout Model in CSS3
- Understanding CSS Selector and Declarations
- Understanding CSS Absolute and Relative Units
- Understanding CSS Media Types and Queries
- CSS Box Shadow
- Understanding clientHeight, offsetHeight & scrollHeight Properties in CSS
- CSS Box Sizing Property
- CSS padding-box Value
- CSS content-box Value
- CSS border-box Value
