{"id":74,"date":"2026-04-06T18:05:47","date_gmt":"2026-04-06T18:05:47","guid":{"rendered":"https:\/\/gigz.pk\/css\/?post_type=lesson&#038;p=74"},"modified":"2026-04-18T16:06:48","modified_gmt":"2026-04-18T16:06:48","slug":"content-padding-border-margin","status":"publish","type":"lesson","link":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/","title":{"rendered":"Content, Padding, Border, Margin"},"content":{"rendered":"\n<p>Content<br>Content is the actual information inside an element. It includes text, images, or other media. This is the main part that users see on a webpage. The size of the content area can be controlled using properties like width and height. A paragraph, heading, or image inside a container is considered content.<\/p>\n\n\n\n<p>Padding<br>Padding is the space between the content and the border of an element. It creates inner space so the content does not touch the edges of the element. Padding increases the overall size of the element and improves readability by giving content some breathing space.<\/p>\n\n\n\n<p>Border<br>Border is the line that surrounds the padding and content. It defines the edge of an element and helps separate it from other elements. You can change the border width, style, and color to match the design of your website.<\/p>\n\n\n\n<p>Margin<br>Margin is the space outside the border. It creates distance between elements and controls how they are positioned on a page. Margin is important for creating clean layouts and preventing elements from overlapping.<\/p>\n\n\n\n<p>Summary<br>The CSS box model includes content, padding, border, and margin. These parts work together to control spacing, layout, and overall design. Understanding this concept helps you build structured and visually appealing web pages.<\/p>\n\n\n\n<p>Padding<br>Padding is the space between the content and the border of an element. It creates inner space so the content does not touch the edges of the element. Padding increases the overall size of the element and improves readability by giving content some breathing space.<\/p>\n\n\n\n<p>Border<br>Border is the line that surrounds the padding and content. It defines the edge of an element and helps separate it from other elements. You can change the border width, style, and color to match the design of your website.<\/p>\n\n\n\n<p>Margin<br>Margin is the space outside the border. It creates distance between elements and controls how they are positioned on a page. Margin is important for creating clean layouts and preventing elements from overlapping.<\/p>\n\n\n\n<p>Summary<br>The CSS box model includes content, padding, border, and margin. These parts work together to control spacing, layout, and overall design. Understanding this concept helps you build structured and visually appealing web pages.<\/p>\n\n\n<div class=\"yoast-breadcrumbs\"><span><span><a href=\"https:\/\/gigz.pk\/css\/\">Home<\/a><\/span> \u00bb <span class=\"breadcrumb_last\" aria-current=\"page\">CSS Fundamentals (Beginner) > Box Model > Content, Padding, Border, Margin<\/span><\/span><\/div>\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1776528380055\"><strong class=\"schema-faq-question\"><\/strong> <p class=\"schema-faq-answer\"><\/p> <\/div> <\/div>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1776528379818\"><strong class=\"schema-faq-question\"><\/strong> <p class=\"schema-faq-answer\"><\/p> <\/div> <\/div>\n","protected":false},"menu_order":0,"template":"","class_list":["post-74","lesson","type-lesson","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Content, Padding, Border, Margin - CSS learning mastery<\/title>\n<meta name=\"description\" content=\"Learn CSS box model basics including content, padding, border, and margin. Understand spacing and layout with simple examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Content, Padding, Border, Margin - CSS learning mastery\" \/>\n<meta property=\"og:description\" content=\"Learn CSS box model basics including content, padding, border, and margin. Understand spacing and layout with simple examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/\" \/>\n<meta property=\"og:site_name\" content=\"CSS learning mastery\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-18T16:06:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/content-padding-border-margin\\\/\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/content-padding-border-margin\\\/\",\"name\":\"Content, Padding, Border, Margin - CSS learning mastery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\"},\"datePublished\":\"2026-04-06T18:05:47+00:00\",\"dateModified\":\"2026-04-18T16:06:48+00:00\",\"description\":\"Learn CSS box model basics including content, padding, border, and margin. Understand spacing and layout with simple examples.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/content-padding-border-margin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/content-padding-border-margin\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/content-padding-border-margin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Fundamentals (Beginner) > Box Model > Content, Padding, Border, Margin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\",\"name\":\"CSS learning mastery\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gigz.pk\\\/css\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Content, Padding, Border, Margin - CSS learning mastery","description":"Learn CSS box model basics including content, padding, border, and margin. Understand spacing and layout with simple examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/","og_locale":"en_US","og_type":"article","og_title":"Content, Padding, Border, Margin - CSS learning mastery","og_description":"Learn CSS box model basics including content, padding, border, and margin. Understand spacing and layout with simple examples.","og_url":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/","og_site_name":"CSS learning mastery","article_modified_time":"2026-04-18T16:06:48+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["WebPage","FAQPage"],"@id":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/","url":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/","name":"Content, Padding, Border, Margin - CSS learning mastery","isPartOf":{"@id":"https:\/\/gigz.pk\/css\/#website"},"datePublished":"2026-04-06T18:05:47+00:00","dateModified":"2026-04-18T16:06:48+00:00","description":"Learn CSS box model basics including content, padding, border, and margin. Understand spacing and layout with simple examples.","breadcrumb":{"@id":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gigz.pk\/css\/lesson\/content-padding-border-margin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gigz.pk\/css\/"},{"@type":"ListItem","position":2,"name":"CSS Fundamentals (Beginner) > Box Model > Content, Padding, Border, Margin"}]},{"@type":"WebSite","@id":"https:\/\/gigz.pk\/css\/#website","url":"https:\/\/gigz.pk\/css\/","name":"CSS learning mastery","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gigz.pk\/css\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson"}],"about":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/types\/lesson"}],"wp:attachment":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}