CSS Box Model

1.7K

The CSS box model is essentially a box that wraps around every HTML element. It specifies how the HTML elements are organized & modeled in the browser engine along with deriving the CSS properties that define the dimension for the HTML elements.

It can be described as a rectangular box that is generated for the HTML elements which forms a document tree.

The box model consist of 4 main properties as follows margin, border, padding & content, which help to create the design and determine the layout of web pages.

• Content: It is used to displays the text, images, etc, that can be sized using the width & height property.
• Padding: It is used to create space around the element, inside any defined border.
• Border: It is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
• Margin: It is used to create space around the element ie., around the border area.

CSS Box Model Code Example

Margin and Padding Shortcuts

Long property	shortcut
margin-top:40px; margin-right:30px margin-bottom:20px margin-left:10px	margin: 40px 30px 20px 10px
margin-top:40px; margin-right:20px margin-bottom:40px margin-left:20px	margin:40px 20px
padding-top:50px; padding-right:40px padding-bottom:30px padding-left:20px	padding: 50px 40px 30px 20px
padding-top:40px; padding-right:20px padding-bottom:40px padding-left:20px	padding:40px 20px

NOTE: Border, Margin and padding will always occupy space, do remember to calculate the complete box-model before writing CSS.