Simplified Understanding Of Box Model

BOX MODEL

The CSS Box Model is the primary means of layout for everything on the web. It is a standard created by the World Wide Web Consortium which describes layout as rectangular boxes in html which surround every single element on a web page. Using the box model, web designers and developers can make use of various properties such as padding, borders, margin-top, margin-right, margin-bottom, margin-left, and many others to create page layouts.

Fig 1a: Pictorial Representation of the Boxes inside a Box Model.

Content-box is the default CSS box-model since CSS version 1. When using content-box, only the content of the box is taken in effect when calculating the width of the box. Content-box is referred to as the W3C box model. BORDER-BOX Border-box is the ported version of the Microsoft box model. Internet Explorer considered the width of the element as being the combined width of the border, padding and content area of the box. No element uses the border-box box model unless specified via the box-sizing property, as such: Example: box-sizing: border-box;

##CONTENT OF A BOX MODEL The content of a box model are other smaller boxes containing Margin, Border, paddling and Content respectively.

• MARGIN Margin is the property that gives the space or gap between elements. It can also be applied to the top, bottom, right and left as the layout demands of it. Interestingly, the margin property can be given a negative value for interesting placement techniques or be set to auto for automatic margins.

• BORDER The border envelops the padding and content. It may be set to dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden. It may also have rounded corners as you desire. The key thing to remember is that the border is between the element’s padding and margin and is typically opaque to cover any background color that may be present.

• PADDING The padding simply sits between the Content and the first two layers of the box; Margin, border. Padding is what adds space between the content and the edge of the box itself. Padding can be added to any side of the content such as top, right, bottom, and left. Padding is transparent so it will allow background colors to be visible if there are any.

• CONTENT Inside the Box, is your content. This may be simple text, images, or other types of media. The content is located at the center of the Box Model. The content becomes more attractive and intriguing when the margin, border and padding is applied. To set things straight, the margin is often mispalced for the padding as they both give the effect of adding space. The big question is, where are these properties adding space? If you need more background for your content, then you likely need some padding. Padding allows the background color through. However, if you feel you need space between the boxes inside the box model, then that is when margin comes into play. Margin is outside of the border, while padding is inside of the border.

##IMPORTANCE OF BOX MODELING The CSS Box Model is used to create a definition for the way the elements are organized on the screen. This accounts for options such as margins, padding, borders, and all the properties that manipulate them. Each element can be thought of as having its own box. Starting from the outside to the inside, the margin usually comes first, follwed by the border and then the paddling an content, each strictly occupying a specific layer in the box.

##PURPOSE OF THE CSS Box Model? The purpose of the CSS Box Model is to define all elements as a box. In other words, everything is a box. Chris Coyier of CSS Tricks describes understanding this concept that every element in web design is a rectangular box was a real “ah-ha moment” for him. It is important to understand how the contents of a box model; margins, borders, padding, and content all work together to create the layout of elements on the page.

##VALUES ASSIGNED TO BOX MODEL PROPERTIES Just like assigning different S.I (International Standard of units) to answers according to the parameters given and the question's damand in Physics, the Box model has different values attached to these properties. This would be units of length such as:

• px: CSS pixels. • mm: Millimeters. • cm: Centimeters. • %: A blocks width such as 50%. • vm: The smaller value of vw and vh. • vw: A percentage of the viewport’s width. • vh: A percentage of the viewport’s height. • em: The computed height value of the element’s font-size. • ex: The height of the character “x” also known as the font’s x-height. • rem: The font-size of which avoids inheritance issues with em.