[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-box-model":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":491,"title":492,"slug":493,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":77,"cornerstone":52,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":750,"quiz":5,"exercises":777,"published_at":5,"updated_at":790,"prev":791,"next":792},"\u003Ch2 id=\"css-box-model-the-complete-guide-to-content-padding-border-and-margin\">CSS Box Model: The Complete Guide to Content, Padding, Border and Margin\u003C\u002Fh2>\u003Cp>The \u003Cstrong>CSS box model\u003C\u002Fstrong> is the foundation of every web layout. Every HTML element is drawn as a rectangular box, and the box model defines how the size of that box is calculated and how much space it occupies on the page. Once you understand the CSS box model, you will know why elements sometimes become wider than expected, why spacing behaves in surprising ways, and how Flexbox, CSS Grid and responsive design really work under the hood.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>The four layers of the box model: content, padding, border and margin\u003C\u002Fli>\u003Cli>How total element width and height are calculated\u003C\u002Fli>\u003Cli>The difference between \u003Ccode>box-sizing: content-box\u003C\u002Fcode> and \u003Ccode>box-sizing: border-box\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>How to write a modern CSS reset with border-box\u003C\u002Fli>\u003Cli>Border vs outline vs box-shadow, and block vs inline boxes\u003C\u002Fli>\u003Cli>CSS logical properties for international layouts\u003C\u002Fli>\u003Cli>How to debug the box model in browser DevTools\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"the-four-layers-of-the-css-box-model\">The Four Layers of the CSS Box Model\u003C\u002Fh3>\u003Cp>Every box is made of four layers, from the inside to the outside:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Content\u003C\u002Fstrong>: the area where your text, images or child elements live. Its size is controlled by \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Padding\u003C\u002Fstrong>: the space between the content and the border. The element background is painted behind the padding.\u003C\u002Fli>\u003Cli>\u003Cstrong>Border\u003C\u002Fstrong>: a line or frame that wraps the padding and content, with its own thickness, style and color.\u003C\u002Fli>\u003Cli>\u003Cstrong>Margin\u003C\u002Fstrong>: the invisible space outside the border that pushes other elements away. Margin is always transparent.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"visual-diagram-of-the-box-model\">Visual Diagram of the Box Model\u003C\u002Fh3>\u003Cpre>+--------------------- MARGIN ---------------------+\n|  +------------------ BORDER ------------------+  |\n|  |  +-------------- PADDING --------------+  |  |\n|  |  |                                     |  |  |\n|  |  |               CONTENT               |  |  |\n|  |  |                                     |  |  |\n|  |  +-------------------------------------+  |  |\n|  +---------------------------------------------+  |\n+---------------------------------------------------+\u003C\u002Fpre>\u003Ch3 id=\"how-total-width-and-height-are-calculated\">How Total Width and Height Are Calculated\u003C\u002Fh3>\u003Cp>By default, the \u003Ccode>width\u003C\u002Fcode> property only sets the size of the content box. Padding and border are added on top of it.\u003C\u002Fp>\u003Cpre>Total width  = width + padding-left + padding-right + border-left + border-right\nTotal height = height + padding-top + padding-bottom + border-top + border-bottom\nSpace used   = total size + margin on each side\u003C\u002Fpre>\u003Cp>\u003Cstrong>Example:\u003C\u002Fstrong> an element with \u003Ccode>width: 300px\u003C\u002Fcode>, \u003Ccode>padding: 20px\u003C\u002Fcode> and \u003Ccode>border: 5px solid\u003C\u002Fcode> is \u003Cstrong>350px\u003C\u002Fstrong> wide by default (300 + 20 + 20 + 5 + 5). This is the number one reason layouts overflow their parent.\u003C\u002Fp>\u003Ch3 id=\"box-sizing-content-box-vs-border-box\">box-sizing: content-box vs border-box\u003C\u002Fh3>\u003Cp>The \u003Ccode>box-sizing\u003C\u002Fcode> property changes how width and height are calculated.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Value\u003C\u002Fth>\u003Cth>width applies to\u003C\u002Fth>\u003Cth>Effect of adding padding or border\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>content-box (default)\u003C\u002Ftd>\u003Ctd>Content only\u003C\u002Ftd>\u003Ctd>The box grows bigger\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>border-box\u003C\u002Ftd>\u003Ctd>Content + padding + border\u003C\u002Ftd>\u003Ctd>The box keeps its size; the content area shrinks\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>With \u003Ccode>box-sizing: border-box\u003C\u002Fcode>, a \u003Ccode>width: 300px\u003C\u002Fcode> element stays exactly 300px wide no matter how much padding or border you add. This makes percentage layouts, grids and responsive design far easier to predict. Margin is never included in either mode.\u003C\u002Fp>\u003Ch3 id=\"the-modern-css-reset-universal-border-box\">The Modern CSS Reset: Universal border-box\u003C\u002Fh3>\u003Cp>Almost every modern CSS reset and framework, including Tailwind CSS Preflight and Bootstrap, sets border-box globally. The classic snippet is \u003Ccode>*, *::before, *::after { box-sizing: border-box; }\u003C\u002Fcode>. A second pattern sets border-box on the root and lets everything inherit it, so a third-party component can opt out locally: \u003Ccode>html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }\u003C\u002Fcode>. Note that \u003Ccode>box-sizing\u003C\u002Fcode> is not inherited by default, which is why the second pattern uses the inherit keyword.\u003C\u002Fp>\u003Ch3 id=\"border-vs-outline-vs-box-shadow\">Border vs Outline vs Box-shadow\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Border\u003C\u002Fstrong> is part of the box model and changes the layout size.\u003C\u002Fli>\u003Cli>\u003Cstrong>Outline\u003C\u002Fstrong> is drawn outside the border edge and takes no space, so it never causes layout shift. It is ideal for focus rings. Use \u003Ccode>outline-offset\u003C\u002Fcode> to add a gap.\u003C\u002Fli>\u003Cli>\u003Cstrong>Box-shadow\u003C\u002Fstrong> also takes no space and does not affect layout. A spread-only shadow such as \u003Ccode>box-shadow: 0 0 0 3px blue\u003C\u002Fcode> can imitate a border without changing size.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Never remove focus outlines without providing an accessible replacement (use \u003Ccode>:focus-visible\u003C\u002Fcode>).\u003C\u002Fp>\u003Ch3 id=\"block-inline-and-inline-block-boxes\">Block, Inline and Inline-Block Boxes\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Block\u003C\u002Fstrong> boxes (div, p, section) start on a new line, stretch to the available width and respect width, height, padding and margin on all sides.\u003C\u002Fli>\u003Cli>\u003Cstrong>Inline\u003C\u002Fstrong> boxes (span, a, strong) flow with text. They ignore width and height, and vertical margin has no effect. Vertical padding and border are painted but do not push neighbouring lines.\u003C\u002Fli>\u003Cli>\u003Cstrong>Inline-block\u003C\u002Fstrong> boxes flow like text but behave like blocks inside, so width, height and all spacing work.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"background-and-the-box-model\">Background and the Box Model\u003C\u002Fh3>\u003Cp>By default, the background is painted under the content, padding and border (\u003Ccode>background-clip: border-box\u003C\u002Fcode>). You can change this with \u003Ccode>background-clip: padding-box\u003C\u002Fcode> or \u003Ccode>content-box\u003C\u002Fcode>, and control where the background image starts with \u003Ccode>background-origin\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"logical-properties-and-the-box-model\">Logical Properties and the Box Model\u003C\u002Fh3>\u003Cp>Modern CSS adds logical properties that adapt to writing direction (left-to-right, right-to-left, vertical). Use \u003Ccode>margin-inline\u003C\u002Fcode>, \u003Ccode>margin-block\u003C\u002Fcode>, \u003Ccode>padding-inline\u003C\u002Fcode>, \u003Ccode>padding-block\u003C\u002Fcode>, \u003Ccode>inline-size\u003C\u002Fcode> and \u003Ccode>block-size\u003C\u002Fcode> instead of left, right, top and bottom. This gives proper support for right-to-left languages such as Urdu and Arabic.\u003C\u002Fp>\u003Ch3 id=\"debugging-the-box-model-in-devtools\">Debugging the Box Model in DevTools\u003C\u002Fh3>\u003Col>\u003Cli>Right-click any element and choose Inspect.\u003C\u002Fli>\u003Cli>Open the Computed tab (Chrome, Edge) or the Layout panel (Firefox) to see the box model diagram: content in blue, padding in green, border in yellow and margin in orange in Chrome.\u003C\u002Fli>\u003Cli>Hover over the element in the Elements panel to highlight its areas on the page.\u003C\u002Fli>\u003Cli>Edit values live in the Styles pane to test spacing before changing your code.\u003C\u002Fli>\u003C\u002Fol>\u003Ch3 id=\"common-box-model-mistakes\">Common Box Model Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Setting \u003Ccode>width: 100%\u003C\u002Fcode> with padding in content-box mode, which causes horizontal overflow.\u003C\u002Fli>\u003Cli>Expecting vertical margin to work on inline elements.\u003C\u002Fli>\u003Cli>Forgetting that vertical margins can collapse (covered in the margin lesson).\u003C\u002Fli>\u003Cli>Using borders for focus styles, which shifts layout. Use outline instead.\u003C\u002Fli>\u003Cli>Mixing border-box and content-box components without realising it.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"best-practices\">Best Practices\u003C\u002Fh3>\u003Cul>\u003Cli>Always apply \u003Ccode>box-sizing: border-box\u003C\u002Fcode> globally at the top of your stylesheet.\u003C\u002Fli>\u003Cli>Use padding for space inside an element and margin or gap for space between elements.\u003C\u002Fli>\u003Cli>Prefer logical properties for new projects.\u003C\u002Fli>\u003Cli>Verify real rendered sizes with DevTools instead of guessing.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"what-is-the-css-box-model-in-simple-words\">What is the CSS box model in simple words?\u003C\u002Fh4>\u003Cp>Every element is a box made of content, padding, border and margin, and these layers decide how big the element is and how much space it takes.\u003C\u002Fp>\u003Ch4 id=\"why-is-my-div-wider-than-the-width-i-set\">Why is my div wider than the width I set?\u003C\u002Fh4>\u003Cp>Padding and border are added to the width in the default content-box mode. Switch to border-box.\u003C\u002Fp>\u003Ch4 id=\"does-margin-count-inside-the-element-width\">Does margin count inside the element width?\u003C\u002Fh4>\u003Cp>No. Margin is outside the element, even in border-box mode.\u003C\u002Fp>\u003Ch4 id=\"is-border-box-safe-to-use\">Is border-box safe to use?\u003C\u002Fh4>\u003Cp>Yes. It is supported in every major browser and is the standard in modern projects.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>Box model layers: content, padding, border, margin.\u003C\u002Fli>\u003Cli>Default box-sizing is content-box, so padding and border add to the width.\u003C\u002Fli>\u003Cli>Use \u003Ccode>*, *::before, *::after { box-sizing: border-box; }\u003C\u002Fcode> in every project.\u003C\u002Fli>\u003Cli>Outline and box-shadow do not affect layout; border does.\u003C\u002Fli>\u003Cli>Inspect boxes in DevTools to debug spacing quickly.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.box {\n  width: 200px;\n  padding: 20px;\n  border: 5px solid #2c3e50;\n  margin: 30px;\n  background: #ecf0f1;\n  font-family: sans-serif;\n}\n<\u002Fstyle>\n<div class='box'>Content 200px, padding 20px, border 5px, margin 30px. Inspect me!<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.a, .b {\n  width: 300px;\n  padding: 20px;\n  border: 5px solid #e74c3c;\n  margin-bottom: 16px;\n  background: #fdecea;\n  font-family: sans-serif;\n}\n.a { box-sizing: content-box; }\n.b { box-sizing: border-box; }\n<\u002Fstyle>\n<div class='a'>content-box: total width is 350px<\u002Fdiv>\n<div class='b'>border-box: total width is 300px<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const el = document.createElement('div');\nel.style.cssText = 'width:300px;padding:20px;border:5px solid black;box-sizing:content-box;';\ndocument.body.appendChild(el);\nconsole.log('content-box offsetWidth:', el.offsetWidth);\nel.style.boxSizing = 'border-box';\nconsole.log('border-box offsetWidth:', el.offsetWidth);\nconst cs = getComputedStyle(el);\nconsole.log('padding-left:', cs.paddingLeft);\nconsole.log('border-left-width:', cs.borderLeftWidth);\nel.remove();\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* Modern CSS reset: universal border-box *\u002F\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n\u002F* Alternative: inherit pattern, easy to opt out per component *\u002F\nhtml { box-sizing: border-box; }\n*, *::before, *::after { box-sizing: inherit; }\n\nbody { margin: 0; }\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.demo { width: 150px; padding: 10px; margin: 20px; background: #eaf2f8; display: inline-block; font-family: sans-serif; }\n.with-border { border: 8px solid teal; }\n.with-outline { outline: 8px solid tomato; outline-offset: 2px; }\n.with-shadow { box-shadow: 0 0 0 8px goldenrod; }\n<\u002Fstyle>\n<div class='demo with-border'>Border: adds to size<\u002Fdiv>\n<div class='demo with-outline'>Outline: no layout impact<\u002Fdiv>\n<div class='demo with-shadow'>Shadow: no layout impact<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nspan { background: #f9e79f; padding: 10px 20px; margin: 20px; width: 300px; height: 80px; }\n.ib { display: inline-block; }\np { font-family: sans-serif; line-height: 2; }\n<\u002Fstyle>\n<p>Inline span: <span>width, height and vertical margin are ignored<\u002Fspan> and the text continues.<\u002Fp>\n<p>Inline-block: <span class='ib'>width, height and margins all work<\u002Fspan> here.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.layers { padding: 30px; border: 10px dashed #2c3e50; background: #f5b041; }\n.clip-padding { background-clip: padding-box; }\n.clip-content { background-clip: content-box; }\n.layers { margin: 10px 0; font-family: sans-serif; }\n<\u002Fstyle>\n<div class='layers'>background-clip: border-box (default)<\u002Fdiv>\n<div class='layers clip-padding'>background-clip: padding-box<\u002Fdiv>\n<div class='layers clip-content'>background-clip: content-box<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* Logical properties adapt to writing direction *\u002F\n.card {\n  padding-inline: 1.5rem;\n  padding-block: 1rem;\n  margin-block-end: 2rem;\n  inline-size: min(100%, 40rem);\n  border-inline-start: 4px solid #3498db;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":487,"slug":488},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-box-model","CSS Box Model Explained: Content, Padding, Border, Margin","Learn the CSS box model with clear examples: content, padding, border, margin, box-sizing: border-box, total width calculation and DevTools tips.",[686],{"id":687,"text":688,"level":12,"children":689},"css-box-model-the-complete-guide-to-content-padding-border-and-margin","CSS Box Model: The Complete Guide to Content, Padding, Border and Margin",[690,694,698,702,706,710,714,718,722,726,730,734,738,742,746],{"id":691,"text":692,"level":57,"children":693},"what-you-will-learn","What You Will Learn",[],{"id":695,"text":696,"level":57,"children":697},"the-four-layers-of-the-css-box-model","The Four Layers of the CSS Box Model",[],{"id":699,"text":700,"level":57,"children":701},"visual-diagram-of-the-box-model","Visual Diagram of the Box Model",[],{"id":703,"text":704,"level":57,"children":705},"how-total-width-and-height-are-calculated","How Total Width and Height Are Calculated",[],{"id":707,"text":708,"level":57,"children":709},"box-sizing-content-box-vs-border-box","box-sizing: content-box vs border-box",[],{"id":711,"text":712,"level":57,"children":713},"the-modern-css-reset-universal-border-box","The Modern CSS Reset: Universal border-box",[],{"id":715,"text":716,"level":57,"children":717},"border-vs-outline-vs-box-shadow","Border vs Outline vs Box-shadow",[],{"id":719,"text":720,"level":57,"children":721},"block-inline-and-inline-block-boxes","Block, Inline and Inline-Block Boxes",[],{"id":723,"text":724,"level":57,"children":725},"background-and-the-box-model","Background and the Box Model",[],{"id":727,"text":728,"level":57,"children":729},"logical-properties-and-the-box-model","Logical Properties and the Box Model",[],{"id":731,"text":732,"level":57,"children":733},"debugging-the-box-model-in-devtools","Debugging the Box Model in DevTools",[],{"id":735,"text":736,"level":57,"children":737},"common-box-model-mistakes","Common Box Model Mistakes",[],{"id":739,"text":740,"level":57,"children":741},"best-practices","Best Practices",[],{"id":743,"text":744,"level":57,"children":745},"frequently-asked-questions","Frequently Asked Questions",[],{"id":747,"text":748,"level":57,"children":749},"key-takeaways","Key Takeaways",[],[751,755,758,762,765,768,771,774],{"id":752,"language":16,"code":753,"is_editable":754},289,"\u003Cstyle>\n.box {\n  width: 200px;\n  padding: 20px;\n  border: 5px solid #2c3e50;\n  margin: 30px;\n  background: #ecf0f1;\n  font-family: sans-serif;\n}\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>Content 200px, padding 20px, border 5px, margin 30px. Inspect me!\u003C\u002Fdiv>",true,{"id":756,"language":16,"code":757,"is_editable":754},290,"\u003Cstyle>\n.a, .b {\n  width: 300px;\n  padding: 20px;\n  border: 5px solid #e74c3c;\n  margin-bottom: 16px;\n  background: #fdecea;\n  font-family: sans-serif;\n}\n.a { box-sizing: content-box; }\n.b { box-sizing: border-box; }\n\u003C\u002Fstyle>\n\u003Cdiv class='a'>content-box: total width is 350px\u003C\u002Fdiv>\n\u003Cdiv class='b'>border-box: total width is 300px\u003C\u002Fdiv>",{"id":759,"language":760,"code":761,"is_editable":754},291,"javascript","const el = document.createElement('div');\nel.style.cssText = 'width:300px;padding:20px;border:5px solid black;box-sizing:content-box;';\ndocument.body.appendChild(el);\nconsole.log('content-box offsetWidth:', el.offsetWidth);\nel.style.boxSizing = 'border-box';\nconsole.log('border-box offsetWidth:', el.offsetWidth);\nconst cs = getComputedStyle(el);\nconsole.log('padding-left:', cs.paddingLeft);\nconsole.log('border-left-width:', cs.borderLeftWidth);\nel.remove();",{"id":763,"language":10,"code":764,"is_editable":754},292,"\u002F* Modern CSS reset: universal border-box *\u002F\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n\u002F* Alternative: inherit pattern, easy to opt out per component *\u002F\nhtml { box-sizing: border-box; }\n*, *::before, *::after { box-sizing: inherit; }\n\nbody { margin: 0; }",{"id":766,"language":16,"code":767,"is_editable":754},293,"\u003Cstyle>\n.demo { width: 150px; padding: 10px; margin: 20px; background: #eaf2f8; display: inline-block; font-family: sans-serif; }\n.with-border { border: 8px solid teal; }\n.with-outline { outline: 8px solid tomato; outline-offset: 2px; }\n.with-shadow { box-shadow: 0 0 0 8px goldenrod; }\n\u003C\u002Fstyle>\n\u003Cdiv class='demo with-border'>Border: adds to size\u003C\u002Fdiv>\n\u003Cdiv class='demo with-outline'>Outline: no layout impact\u003C\u002Fdiv>\n\u003Cdiv class='demo with-shadow'>Shadow: no layout impact\u003C\u002Fdiv>",{"id":769,"language":16,"code":770,"is_editable":754},294,"\u003Cstyle>\nspan { background: #f9e79f; padding: 10px 20px; margin: 20px; width: 300px; height: 80px; }\n.ib { display: inline-block; }\np { font-family: sans-serif; line-height: 2; }\n\u003C\u002Fstyle>\n\u003Cp>Inline span: \u003Cspan>width, height and vertical margin are ignored\u003C\u002Fspan> and the text continues.\u003C\u002Fp>\n\u003Cp>Inline-block: \u003Cspan class='ib'>width, height and margins all work\u003C\u002Fspan> here.\u003C\u002Fp>",{"id":772,"language":16,"code":773,"is_editable":754},295,"\u003Cstyle>\n.layers { padding: 30px; border: 10px dashed #2c3e50; background: #f5b041; }\n.clip-padding { background-clip: padding-box; }\n.clip-content { background-clip: content-box; }\n.layers { margin: 10px 0; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='layers'>background-clip: border-box (default)\u003C\u002Fdiv>\n\u003Cdiv class='layers clip-padding'>background-clip: padding-box\u003C\u002Fdiv>\n\u003Cdiv class='layers clip-content'>background-clip: content-box\u003C\u002Fdiv>",{"id":775,"language":10,"code":776,"is_editable":754},296,"\u002F* Logical properties adapt to writing direction *\u002F\n.card {\n  padding-inline: 1.5rem;\n  padding-block: 1rem;\n  margin-block-end: 2rem;\n  inline-size: min(100%, 40rem);\n  border-inline-start: 4px solid #3498db;\n}",[778,784],{"id":567,"title":779,"slug":780,"prompt":781,"starter_code":782,"expected_output":783,"language":16,"order_index":23},"Fix the Overflowing Card","fix-overflowing-card","The card below is set to width 100% but it overflows its 400px parent because of padding and border. Fix it with one CSS property so the card fits exactly inside the parent, without changing its width, padding or border values.","\u003Cstyle>\n.parent { width: 400px; background: #eee; }\n.card { width: 100%; padding: 24px; border: 4px solid #333; background: #fff; }\n\u003C\u002Fstyle>\n\u003Cdiv class='parent'>\n  \u003Cdiv class='card'>I should fit inside my parent.\u003C\u002Fdiv>\n\u003C\u002Fdiv>","The card is exactly 400px wide in total and no horizontal overflow appears (box-sizing: border-box).",{"id":571,"title":785,"slug":786,"prompt":787,"starter_code":788,"expected_output":789,"language":760,"order_index":12},"Calculate Total Box Width","calculate-total-box-width","Write a function totalWidth(width, padding, border, boxSizing) that returns the total rendered width (without margin). Padding and border values are per side. For content-box add padding and border on both sides, for border-box return the width itself.","function totalWidth(width, padding, border, boxSizing) {\n  \u002F\u002F TODO: implement\n}\n\nconsole.log(totalWidth(300, 20, 5, 'content-box'));\nconsole.log(totalWidth(300, 20, 5, 'border-box'));","350\n300","2026-09-30T16:55:40+00:00",{"id":483,"slug":485,"title":484},{"id":495,"slug":497,"title":496}]