Box model forms the basis of HTML/CSS. In HTML we know that either the element by default is either a “block level ”element or an “inline level” element. Either of this elements are represented in the form of rectangles. That is all the elements in HTML are rectangular in nature. Block level elements take up the entire width of the screen in a rectangular form and inline level elements take up the rectangular space according to the content width. So Box model plays a important role in building layouts. Box model basically pertains to CSS and is also referred to CSS Box model.
Box model relies on certain properties based on which we can build our design and layouts. These properties include height, width (height & width represent the content), padding, border and margin.
So from the above image, we can see “content edge”. Content is the rectangular box and it has height and width as its properties. Beyond Content we have padding. Padding gives a breathing room that is it creates a space within the element by expanding the element. Beyond padding we have border and finally it is followed by margin. Margin provides space between two elements. In other words Margin is something that is outside the element and transparent in nature. Let’s understand each of the properties by comparing their behaviour with both block level and inline elements.
Now lets add padding of 20 px to each side to understand the effects post applying padding.Padding property has different syntax. It can be written in both longhand and shorthand form. Syntax of shorthand or condensed form is {padding : top right bottom left;}.The values of top, right, bottom, left can be taken in any units like px, em or rem. We can even target individually like only giving padding at top by the following syntax { padding-top : 15px}.So in this case it will give padding only in top for the content. Let understand by our usual comparison method.
It is clear that as compared to earlier output, in the output of the above image, there is space around the written content in each of the case. However we can observe that span has been unaffected by the height and width properties, it only takes height and width in accordance to the content it has. And padding truly provides a breathing space to the content. Now lets understand about border.
Border tells the browser to account for any border and padding in the values you specify for an element’s width and height. Border too has longhand and shorthand properties. It’s syntax is {border : border-size border-style border-color}. For example .block-level{border: 2px solid black} will create border. Lets understand through comparision. However border is bound to bleed in inline elements.
Padding, border all these properties were part of the element. Margin property in box model pertains the part outside the element. It allows to create space between two elements thus helping us to space the elements to meet the design of the layout.
It can be seen that margin gets only applied at all four sides in case of block level element. Though in the output of block level element at the bottom of block level element we can see less of margin(not exactly 40px), this has been because the bleeding effect created by padding and border on inline element and it just being below block element it bleeds into the margin(margin-bottom) of the above block level.
Also in inline element(the 2nd rectangle in output of inline-level) margin does’nt get applied vertically. Only horizontal margin is applicable. Thus only margin-left and margin-right longhand properties bound to work and margin-top and margin-bottom won’t work.
These are few of the properties that rule the world of CSS. Based on them one can build and design layouts. So understanding CSS is incomplete without understanding box-model. In the next article we will delve deeper into other features of box-model and CSS.
