{"id":37838,"date":"2021-10-15T08:40:02","date_gmt":"2021-10-15T08:40:02","guid":{"rendered":"\/tutorials\/?p=37838"},"modified":"2026-02-16T04:29:14","modified_gmt":"2026-02-16T04:29:14","slug":"padding-vs-margin","status":"publish","type":"post","link":"\/tutorials\/padding-vs-margin","title":{"rendered":"Padding vs margin: What\u2019s the difference in CSS and when to use them?"},"content":{"rendered":"<p>Padding is a CSS property that adds room between an HTML element&rsquo;s border and its content to increase its total size. Meanwhile, margin puts empty space around an element to prevent it from overlapping with adjacent elements.<\/p><p>Think of every HTML element as a box with layers: this is the CSS box model that governs web layout. Padding creates breathing room between an element&rsquo;s content and its border, expanding the element from the inside. Margin, on the other hand, pushes elements apart by adding invisible space around their outer edges.<\/p><p>You can add padding and margin using either longhand or shorthand properties. Both take<strong> pixels<\/strong>, <strong>percentages<\/strong>, <strong>em<\/strong>, <strong>rem<\/strong>, and<strong> inherit <\/strong>as their values, but margin lets you use <strong>auto<\/strong> and<strong> negatives<\/strong>. <\/p><p>Understanding how padding and margin work is important for your website&rsquo;s design. It&rsquo;s also crucial to consider best practices like using relative values so you can implement these CSS properties more effectively.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-is-padding-in-css\"><strong>What is padding in CSS?<\/strong><\/h2><p>Padding is a CSS property that controls the space within an HTML element, between its content and border. It adds space around the content, making it more easily identifiable and visually appealing.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e001710f81b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1540\" height=\"850\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/public\" alt=\"An illustration of how padding works\" class=\"wp-image-135113\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/w=1540,fit=scale-down 1540w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-padding-works.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1540px) 100vw, 1540px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Padding is part of the element&rsquo;s interior, which contributes to its total size and interactable areas. When you apply padding, the space is filled with the element&rsquo;s background color or image, creating visual breathing room between the content and border.<\/p><p>You can define the padding size using different values:<\/p><ul class=\"wp-block-list\">\n<li><strong>Pixels<\/strong>.<strong> <\/strong>Representing the number of pixels on the screen. Adding<strong> 20px <\/strong>padding spaces content from its border by <strong>20px<\/strong>.<\/li>\n\n\n\n<li><strong>Percentage. <\/strong>Calculating the padding size relative to the parent element&rsquo;s width. If the parent is <strong>50px <\/strong>wide, using<strong> 50%<\/strong> padding equals <strong>20px<\/strong>.<\/li>\n\n\n\n<li><strong>em<\/strong>. Setting the padding relative to the element&rsquo;s font size. If the font size is <strong>16px<\/strong>, then <strong>1em<\/strong> equals <strong>16 pixels<\/strong>.<\/li>\n\n\n\n<li><strong>rem<\/strong>. Applying padding based on the font size of the root elements, typically specified at the top of the HTML document. If the page&rsquo;s font size is <strong>12px<\/strong>,<strong> 1rem<\/strong> is <strong>12px<\/strong>.<\/li>\n\n\n\n<li><strong>inherit. <\/strong>Adopting<strong> <\/strong>the same padding value as the parent element. If the parent element&rsquo;s padding is <strong>10px<\/strong>, the child&rsquo;s padding will also be <strong>10px<\/strong>. <\/li>\n\n\n\n<li><strong>initial. <\/strong>Resetting an element&rsquo;s padding value to the default, which is <strong>0<\/strong>.<\/li>\n\n\n\n<li><strong>unset. <\/strong>Behaving the same as <strong>initial<\/strong>, resetting the padding size to <strong>0<\/strong>. <\/li>\n<\/ul><p>Padding is helpful for a variety of purposes:<\/p><ul class=\"wp-block-list\">\n<li><strong>Adding room inside an element. <\/strong>Applying padding creates space around content, like text, within a box or container to improve visual appeal.<\/li>\n\n\n\n<li><strong>Expanding interactive area<\/strong>. Using padding lets you increase the clickable area of a button or link, which is crucial for mobile-friendly design.<\/li>\n\n\n\n<li><strong>Content spacing<\/strong>. Setting padding is crucial to ensure content doesn&rsquo;t touch the edges of a container, ensuring better readability.<\/li>\n<\/ul><p>Here&rsquo;s an example of a button without CSS padding:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0017111dff\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"930\" height=\"540\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-without-padding.png\/public\" alt=\"A simple HTML element without padding\" class=\"wp-image-134891\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-without-padding.png\/w=930,fit=scale-down 930w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-without-padding.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-without-padding.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-without-padding.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Selecting the text using a <a href=\"\/tutorials\/css-class\">CSS class<\/a> and adding<strong> 20px<\/strong> padding around it increases the element&rsquo;s size:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e00171144e0\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1374\" height=\"748\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-with-padding.png\/public\" alt=\"A simple HTML element with 20px padding\" class=\"wp-image-134892\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-with-padding.png\/w=1374,fit=scale-down 1374w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-with-padding.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-with-padding.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-with-padding.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/a-simple-html-button-with-padding.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1374px) 100vw, 1374px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-what-is-margin-in-css\"><strong>What is margin in CSS?<\/strong><\/h2><p>Margin is the CSS property that controls the space outside an element&rsquo;s border, creating separation between it and adjacent content. This space is always transparent and unaffected by the element&rsquo;s background color or image.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0017116a85\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1540\" height=\"850\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/public\" alt=\"An illustration of how margin works\" class=\"wp-image-135115\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/w=1540,fit=scale-down 1540w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/how-margin-works.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1540px) 100vw, 1540px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>You can use<strong> pixels<\/strong>, <strong>percentages<\/strong>, <strong>inherit, em, rem, initial, <\/strong>and<strong> unset<\/strong> as margin values. Unlike padding, however, it also supports <strong>negative<\/strong> and <strong>auto <\/strong>values.<\/p><p>Margin is essential for positioning elements and controlling the overall page layout. It&rsquo;s commonly used for:<\/p><ul class=\"wp-block-list\">\n<li><strong>Separating elements<\/strong>. Putting space between two different blocks of content, like paragraphs or images.<\/li>\n\n\n\n<li><strong>Centering a block-level element<\/strong>: Setting the margin to auto will horizontally center a block-level element within its container.<\/li>\n\n\n\n<li><strong>Creating negative space<\/strong>. Using negative margin values lets you pull elements closer together or even make them overlap.<\/li>\n<\/ul><p>For example, we have these HTML elements without any margin:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e001711903d\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"782\" height=\"634\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-without-margins.png\/public\" alt=\"HTML elements without margins\" class=\"wp-image-134893\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-without-margins.png\/w=782,fit=scale-down 782w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-without-margins.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-without-margins.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-without-margins.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Applying <strong>50px<\/strong> margins will separate those elements based on the specified distance:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e001711b890\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1284\" height=\"1096\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-with-margins.png\/public\" alt=\"HTML elements with 50px margins\" class=\"wp-image-134894\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-with-margins.png\/w=1284,fit=scale-down 1284w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-with-margins.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-with-margins.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-with-margins.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/html-elements-with-margins.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1284px) 100vw, 1284px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Margin has a unique feature called <strong>collapse<\/strong>, which allows you to combine two adjacent vertical margins into one to avoid excessive spacing between elements.<\/p><p>Instead of adding two margins, the collapse feature will use the bigger margin. For example, if you have elements with a margin of <strong>20px<\/strong> and<strong> 30px<\/strong>, the distance between them will be <strong>30px<\/strong>.<\/p><h2 class=\"wp-block-heading\" id=\"h-padding-vs-margin-key-differences\"><strong>Padding vs margin: Key differences<\/strong><\/h2><p>Padding adds room within an element to increase its interactive size, while margin creates invisible space around it. While similar, there are some significant differences between them. Here&rsquo;s how they compare.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>Padding<\/strong><\/td><td><strong>Margin<\/strong><\/td><\/tr><tr><td><strong>Location<\/strong><\/td><td>Inside the element, between its content and the border<\/td><td>Outside the element&rsquo;s border<\/td><\/tr><tr><td><strong>Function<\/strong><\/td><td>Creates breathing room within an element<\/td><td>Creates space between elements or an element and its container<\/td><\/tr><tr><td><strong>Effect on background<\/strong><\/td><td>Filled with the element&rsquo;s background color or image<\/td><td>Always transparent and unaffected by the element&rsquo;s background<\/td><\/tr><tr><td><strong>Supported values<\/strong><\/td><td>Pixels, percentages, ems, rems, inherit from the parent element, initial, and unset.<\/td><td>Everything that padding does, plus auto and negative values<\/td><\/tr><tr><td><strong>Vertical collapse<\/strong><\/td><td>Not supported<\/td><td>Vertical margins on adjacent block-level elements can collapse into a single margin<\/td><\/tr><\/tbody><\/table><\/figure><p>While different, padding and margin have a similar purpose in defining how HTML elements are rendered inside the CSS box. This concept is crucial when designing and <a href=\"\/web-hosting\">publishing a website<\/a> because it defines how the page looks. <\/p><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-web-hosting\" href=\"\/web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-what-is-the-css-box-model\"><strong>What is the CSS box model?<\/strong><\/h2><p>The CSS box model describes how browsers render every HTML element as a rectangular box. Understanding it is crucial when using padding and margins to predict the element&rsquo;s final spacing more easily.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e001711f156\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1540\" height=\"850\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/public\" alt=\"A breakdown of elements in the CSS box model \" class=\"wp-image-135116\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/w=1540,fit=scale-down 1540w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/10\/the-css-box-model-breakdown.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1540px) 100vw, 1540px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>The CSS box model comprises several distinct layers, each adding space and dimension to the element:<\/p><ul class=\"wp-block-list\">\n<li><strong>Content box.<\/strong> The innermost area where your actual content is displayed. Its size is defined as explicit width\/height dimensions or determined automatically based on the web browser that renders it.<\/li>\n\n\n\n<li><strong>Padding box<\/strong>. This layer surrounds the content and creates an inner space between the content and the border. <\/li>\n\n\n\n<li><strong>Border<\/strong> <strong>box.<\/strong> The border wraps around the padding, creating a visual frame for the element. <\/li>\n\n\n\n<li><strong>Margin<\/strong> <strong>box<\/strong>: The outermost layer that creates a transparent space outside the border, separating one element from another. <\/li>\n<\/ul><p>You can modify your CSS box&rsquo;s padding and border behavior by using the <strong>box-sizing <\/strong>property with values like <strong>content-box<\/strong> and <strong>border-box<\/strong>.<\/p><p>Use <strong>box-sizing: content-box; <\/strong>if you want padding and borders to increase the element size. Since CSS uses this property by default, you don&rsquo;t need to specify it explicitly unless necessary for clarity.<\/p><p>Meanwhile, use<strong> box-sizing: border-box; <\/strong>if you want the element&rsquo;s total dimension to stay fixed even with padding and border. You can add this property globally at the top of your CSS file like so:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">, *::before, *::after {\n  box-sizing: border-box;\n}<\/pre><p>Alternatively, apply<strong> border-box <\/strong>to a specific element by adding the property inside the CSS class selector:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.element {\n  box-sizing: border-box;\n  Padding: 20px;\n}<\/pre><h2 class=\"wp-block-heading\" id=\"h-how-to-add-padding-in-css\"><strong>How to add padding in CSS<\/strong><\/h2><p>The most basic way to add padding in CSS is to use the <strong>padding-top<\/strong>, <strong>padding-bottom<\/strong>, <strong>padding-left<\/strong>, and <strong>padding-right <\/strong>properties, followed by the desired values. These properties define where the padding will be relative to the content.<\/p><p>For example, the following CSS code will add<strong> 20px <\/strong>padding around an HTML button element:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button-element {\n  padding-top: 20px; \n  padding-bottom: 20px;\n  padding-left: 20px;\n  padding-right: 20px;\n}<\/pre><p>To keep your code concise, you can also use the <strong>shorthand property<\/strong> to define the padding values in a single line. It looks like this:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button-element {\n  padding: 20px; \n}\n\n.interactive-element {\n  padding: 20px 40px; \n}<\/pre><p>The shorthand property behaves differently depending on the number of values assigned to it:<\/p><ul class=\"wp-block-list\">\n<li><strong>Four values<\/strong>. Specifying the values of the top, right, bottom, and left paddings in clockwise order.<\/li>\n\n\n\n<li><strong>Three values<\/strong>. Controlling the value of the top, horizontal, and bottom padding. This is used if the right and left padding have the same length.<\/li>\n\n\n\n<li><strong>Two values<\/strong>. Determining the value of the vertical and horizontal padding.<\/li>\n\n\n\n<li><strong>One value<\/strong>. Setting a single value for all four sides of the padding. <\/li>\n<\/ul><p>\n\n\n<div><p class=\"important\"><strong>Important!<\/strong> When using padding, pay attention to whether you are using the <strong>content-box<\/strong> or <strong>border-box<\/strong> property, as it will affect the final size of your element.<\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-margins-in-css\"><strong>How to add margins in CSS<\/strong><\/h2><p>Adding margins in CSS is the same as padding. You can use either the shorthand or longhand properties, which behave similarly to those of padding. Here&rsquo;s an example:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button.element {\n  margin: 20px;\n}\n\n.interactive.element {\n  margin: 20px 40px;\n}<\/pre><p>Unlike paddings, however, you can use negative values with margins. This will bring the element closer to a specific direction according to the given value.<\/p><p>For example, the following CSS styling will bring the <strong>button.value<\/strong> element upward by <strong>20px<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button.element {\n  margin-top: -20px;\n}<\/pre><p>You can also add margin to center elements by using the <strong>auto <\/strong>value, like so:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button.element {\n  margin-left: auto;\n  margin-right: auto;\n}<\/pre><p>Note that the auto margin only works for horizontal spacing by default. To automatically center elements vertically, they must be inside a <strong>flexbox<\/strong> or <strong>grid<\/strong>.<\/p><p>For example, here&rsquo;s an <a href=\"\/tutorials\/difference-between-inline-external-and-internal-css\">inline CSS code<\/a> snippet that uses automatic vertical and horizontal margins with flexbox:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n\n&lt;head&gt;\n  &lt;style&gt;\n    .flex-container {\n      display: flex;\n    }\n\n    .box {\n      margin: auto;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;div class=\"flex-container\"&gt;\n    &lt;div class=\"box\"&gt;I'm centered!&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/pre><h2 class=\"wp-block-heading\" id=\"h-what-are-some-tips-for-using-padding-and-margin-effectively\"><strong>What are some tips for using padding and margin effectively?<\/strong><\/h2><p>Using padding and margin effectively can make your layouts cleaner and more accessible for a broader range of users, which is a <a href=\"\/tutorials\/web-design-best-practices\">crucial web design best practice<\/a>. Here are a few key tips:<\/p><ul class=\"wp-block-list\">\n<li><strong>Differentiate between layout and content elements<\/strong>. Distinguishing between web page components makes them more easily reusable and maintainable. Apply margins to layout elements to define structure and spacing between blocks, while using padding on content elements, such as buttons or cards, to give their content internal space. <\/li>\n\n\n\n<li><strong>Use padding for interactive elements<\/strong>. Using padding for interactive elements increases their size for better usability and accessibility. It also helps you maintain a consistent dimension more easily than adjusting the size manually. <\/li>\n\n\n\n<li><strong>Set the bottom margin first<\/strong>. Adding the bottom margin before the other directions helps you easily maintain consistent spacing between elements.<\/li>\n\n\n\n<li><strong>Prioritize relative values<\/strong>. Using auto, inherit, or percentages allows you to set padding and margin values relative to other elements. This results in a more consistent sizing and placement of your elements.   <\/li>\n\n\n\n<li><strong>Adjust for responsiveness<\/strong>. Adapting padding and margin to various screen sizes ensures your web page is usable on different devices. Small displays generally need minimal whitespace to maximize content visibility, while large ones benefit from more to improve readability.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-how-can-you-adjust-padding-and-margin-for-different-screen-sizes\"><strong>How can you adjust padding and margin for different screen sizes?<\/strong><\/h2><p>Padding and margin should be designed to adapt to different screen sizes, ensuring content looks good and remains usable across devices. You can do it by using <a href=\"\/tutorials\/css-breakpoints\">CSS breakpoints<\/a>.<\/p><p>This feature lets you apply different spacing rules at specific screen widths. On smaller viewports, reduce padding and margin to maximize usable space and ensure content remains easily readable and accessible.<\/p><p>Conversely, increasing padding and margins on larger desktop screens adds whitespace, improving visual balance and user experience by preventing the interface from feeling cluttered.<\/p><p>Combining breakpoints with padding and margins is one of many essential practices when implementing CSS into your website. If you are new to web design, check out our <a href=\"\/tutorials\/website\/website-design\">website design tutorials<\/a> to familiarize yourself with the styling language.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Padding is a CSS property that adds room between an HTML element&rsquo;s border and its content to increase its total [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/tutorials\/padding-vs-margin\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":337,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Padding vs Margin: What\u2019s the difference in CSS?","rank_math_description":"Learn the differences between padding vs margin, how they work, and how to implement them in CSS with extra tips.","rank_math_focus_keyword":"padding vs margin","footnotes":""},"categories":[22601,22604],"tags":[],"class_list":["post-37838","post","type-post","status-publish","format-standard","hentry","category-website","category-website-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/padding-vs-margin","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/padding-vs-margin","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/padding-vs-margin","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/padding-vs-margin","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/padding-vs-margin","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/padding-vs-margin","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/padding-vs-margin","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/padding-vs-margin","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/padding-vs-margin","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/padding-vs-margin","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/padding-vs-margin","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/padding-vs-margin","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/37838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/users\/337"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/comments?post=37838"}],"version-history":[{"count":21,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/37838\/revisions"}],"predecessor-version":[{"id":140417,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/37838\/revisions\/140417"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media?parent=37838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/categories?post=37838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/tags?post=37838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}