Welcome Guest! (App Version 3.1)

websitnero logo name

HTML Box-Model


  • Box models presents a helpful way to understand how -- content, padding, border & margin are aligned for every element or item in an HTML document.
  • With box model you understand better about elements and their spacing.

What is Box-Model?

Box model helps in understanding the dimensions of any HTML element along with the amount of margin, border and padding applied to it (which take their own space).

To represent Box-Model, browser generates a 2D box where the values of each of the above properties are specifically mentioned and user gets an overall idea of which property is taking how much space and what are the dimensions of main-content (textual or other data) inside the tags.

Box-Model proves very helpful while aligning various HTML elements on a web page as per the required UX and helps in fine-tuning values of margin and padding to align elements properly.

Further Reading

1. The 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.