Welcome Guest! (App Version 3.1)

websitnero logo name

Box Model

Concept of Box-Model

Box model is the graphical representation of content and some other dimension effecting properties of an html element. Box-Model helps in fine-tuning the various css properties named -- padding, border and margin to set the html element as per the required Ux. Various properties like padding, border, margin have always been part of css but box-model simply gives a UI perspective and their comparision and position from inside to outside to help the programmer understand their exact position and usage.

Following is the graphical representation of Box Model:

box model

In the following example we are setting padding, border, margin of a div element with some content inside it.

Example

<head>
<style>
div{
  margin: 20px;
  border: 5px solid black;
  padding: 15px;
}
</style>
</head>

<body> 
  <div>This is a div.</div>
</body> 

Box-Model representation in Chrome-Dev Tools

While you are developing a website, if you open your code in Chrome Dev Tools and go to Elements Tab you can see box-model representation of an element there too. Just point cursor to an element and click it. On the right-hand panel in the bottom you will see the box-model properties of that elment.

Look at the image below to have better understanding:

box model
Further Reading

1. Introduction to Box Model

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.