--- title: CSS Margins: All You Need to Know | daily.dev description: Learn all about CSS margins, including the CSS box model, different margin measurement units, using the margin shorthand property, negative margins, collapsing... canonical: https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Margins: All You Need to Know | daily.dev og:description: Learn all about CSS margins, including the CSS box model, different margin measurement units, using the margin shorthand property, negative margins, collapsing... og:url: https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd og:image: https://api.daily.dev/og/posts/i1eN5Y8Dd.png og:image:alt: CSS Margins: All You Need to Know og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS Margins: All You Need to Know **[TestMu AI \(Formerly LambdaTest\)](https://daily.dev/sources/testmu_ai)** · [@adarsh____gupta](https://daily.dev/adarsh____gupta) · 34 min read · 24 upvotes · 2 comments ## Summary Learn all about CSS margins, including the CSS box model, different margin measurement units, using the margin shorthand property, negative margins, collapsing margins, margin inheritance, the difference between margins and padding, creating responsive margins, CSS margins in layouts, best practices for using CSS margins, and debugging CSS margin issues. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@adarshgupta992** · 1 upvotes > 🚀 **@pavan\_shanxm** · 1 upvotes > NIce one revisiting the basics --- Tags: [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS Margins: All You Need to Know","url":"https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd"},"datePublished":"2024-04-19T11:29:59.377Z","dateModified":"2024-09-05T06:52:47.193Z","description":"Learn all about CSS margins, including the CSS box model, different margin measurement units, using the margin shorthand property, negative margins, collapsing...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c55e61d691357f2c45ba95a22b73bc2f?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c55e61d691357f2c45ba95a22b73bc2f?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"TestMu AI (Formerly LambdaTest)","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Adarsh gupta","url":"https://daily.dev/adarsh____gupta","image":"https://lh3.googleusercontent.com/a/ALm5wu1fpjbWVbxDV6he_rFMSTVnOxDMfe2wGuAoBe4NNw=s96-c","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":20}},"commentCount":2,"discussionUrl":"https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":24},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"ui-design","timeRequired":"PT34M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"TestMu AI (Formerly LambdaTest)","item":"https://daily.dev/squads/testmu_ai"},{"@type":"ListItem","position":3,"name":"CSS Margins: All You Need to Know"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-margins-all-you-need-to-know-i1en5y8dd","comment":[{"@type":"Comment","text":"🚀","datePublished":"2024-04-21T04:28:34.353Z","url":"https://daily.dev/posts/i1eN5Y8Dd#c-RYqrOsC5i","author":{"@type":"Person","name":"Adarsh M","url":"https://daily.dev/adarshgupta992","image":"https://avatars.githubusercontent.com/u/73733229?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"NIce one revisiting the basics","datePublished":"2024-04-26T18:29:06.304Z","url":"https://daily.dev/posts/i1eN5Y8Dd#c-vVMMuD29i","author":{"@type":"Person","name":"Pavan Shanmukha Madhav","url":"https://daily.dev/pavan_shanxm","image":"https://media.daily.dev/image/upload/s--5E5RI6Bw--/f_auto/v1712913599/avatars/avatar_XQ4AaKIwZj1YY8qeA2RR1"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```