Welcome Guest! (App Version 3.1)
IntroductionHTML Tutorial What is HTML? My First Program in HTML Doctype Block Elements in HTML Inline Elements in HTML
Box ModelWhat is Box Model Content in Box Model Padding in Box Model Border in Box Model Margin in Box Model
HTML TagsDiv Tags H1 to H6 Tags Paragraphs Tags Span Tags Bold Tags Italic Tags
HTML UtilitiesAdding Images Adding Hyperlinks Adding Comments Types of Lists Tables Iframes Breaking Lines Horizontal Line
FormsForms in HTML Text-Box Radio Checkbox Select and Option Text Area Button Submit
HTML 5What is new in HTML5 Syntax Changes New Elements & Properties Semantic Tags New Elements New Input Types Graphics Support Canvas SVG Media Support Audio Video Client Side Storage Local Storage Session Storage Indexed DB Web SQL [dep] Cookies API Support Web Worker Web Sockets Service Worker App Cache [dep] SSE Drag & Drop Geolocation
HTML QuizHTML Quiz 1
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.