{"id":14637,"date":"2020-04-13T22:01:53","date_gmt":"2020-04-14T05:01:53","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14637"},"modified":"2023-12-01T02:37:08","modified_gmt":"2023-12-01T10:37:08","slug":"css-margin","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-margin\/","title":{"rendered":"CSS Margin"},"content":{"rendered":"\n

Adding spaces between elements on a web page is a crucial part of designing aesthetically pleasing and functional user experiences. Margins are used to create an empty area around an HTML element to separate the element from other objects on the web page.<\/p>\n\n\n\n

The CSS margin property, and its four subproperties, are used to set a margin around an element in HTML. <\/p>\n\n\n\n

This tutorial will discuss, with reference and examples, how to use the margin property and its subproperties to create a margin around an element in CSS. By the end of reading this tutorial, you\u2019ll be an expert at applying a margin to a web element using CSS.<\/p>\n\n\n\n

CSS Margin<\/h2>\n\n\n\n

The CSS margin property is used to create space around an element. This space allows you to easily separate different elements on a web page, outside of any borders.<\/p>\n\n\n\n

In CSS, the margin property is shorthand for four subproperties. These subproperties are used to set the top, right, bottom, and left margins for a web element.<\/p>\n\n\n\n

Every element on a web page consists of one or more boxes. Elements use the box model to outline how the box is displayed on the web page.<\/p>\n\n\n\n

Margins are one of the main components of the box model and exist on the outermost layer of the box model. In the below graphic, you can see that margins are applied outside of the borders in an HTML element:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

For the purposes of this tutorial, we\u2019ll focus on the margin property. If you\u2019re looking to learn more about the different components of the box model, you can read our articles on CSS borders<\/a> and padding.<\/p>\n\n\n\n

CSS Margin Individual Sides<\/h2>\n\n\n\n

The following properties are used to set the margin for each side of a web element:<\/p>\n\n\n\n

    \n
  • margin-top<\/li>\n\n\n\n
  • margin-right<\/li>\n\n\n\n
  • margin-bottom<\/li>\n\n\n\n
  • margin-left<\/li>\n<\/ul>\n\n\n\n

    These properties allow you to define the margin for an individual side of an element. Each of these properties accepts one of four values to determine the size of the margin. They are as follows:<\/p>\n\n\n\n

      \n
    • length<\/strong> specifies a margin using px, em, or another CSS length measurement.<\/li>\n\n\n\n
    • percentage<\/strong> (%) specifies a margin as a percentage of the width of the element to which the margin is applied.<\/li>\n\n\n\n
    • auto<\/strong> instructs the browser to calculate the margin.<\/li>\n\n\n\n
    • inherit<\/strong> specifies the margin should be inherited from its parent element.<\/li>\n<\/ul>\n\n\n\n

      Let\u2019s walk through an example to discuss how the margin subproperties works.<\/p>\n\n\n\n

      Suppose we are designing a box and we want to include margins around our box to separate it from other elements on the web page. Our box should have a top margin of 50px, a left margin of 30px, a right margin of 40px, and a bottom margin of 50px. We could create this box using the following code:<\/p>\n\n\n\n

      index.html\n<div class=\"outer\">\n<p class=\"box\">\n\tThis is a box.\n<\/p>\n<\/div><\/pre><\/div>\n\n\n\n
      styles.css\n.box {\n\tmargin-top: 50px;\n\tmargin-left: 30px;\n\tmargin-right: 40px;\n\tmargin-bottom: 40px;\n\tborder: 1px solid red;\n}\n.outer {\n\tborder: 1px solid blue;\n}<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      In our code, we have created two boxes. The first box, which is defined using a <div> tag, is assigned the class outer<\/code>. In our CSS file, we state that any element with the outer<\/code> class should have a 1px-wide solid blue border. We have defined this border to showcase the margin that our inner box has created.<\/p>\n\n\n\n
      Inside our <div> tag is a <p> tag, which contains the text This is a box<\/code>. Our <p> tag has the class name box<\/code>, which means the style for box<\/code> in our CSS file is applied to our <p> element.<\/p>\n\n\n\n
      Our <p> tag has been assigned a 50px top margin, 30px left margin, 40px right margin, and 40px bottom margin. We have also given our <p> tag a 1px-wide solid red border. As you can see in the above image, our margin has created a gap between the border of our <p> box and our blue box. If we had no margins, these boxes would be closer together.<\/p>\n\n\n\n
      CSS Margin Shorthand<\/h2>\n\n\n\n
      In the above example, we used up four lines of code to specify the margins we wanted to apply to our box. We can make our code more efficient by using the margin property.<\/p>\n\n\n\n
      The margin property is shorthand for the four subproperties we discussed earlier. This property allows you to specify the margins for a box on one line of code, instead of on multiple lines.<\/p>\n\n\n\n
      The syntax you use for the margin shorthand depends on how many values you specify. The minimum number of values you can specify is one, and the maximum is four. Let\u2019s break down an example of how to use the margin shorthand property in all potential use cases.<\/p>\n\n\n\n
      Four Values<\/h3>\n\n\n\n
      Instead of using the individual margin subproperties to create a box with four different margin values, you can use the margin shorthand property and specify four values.<\/p>\n\n\n\n
      If you specify four values with the margin property, the order in which your margins will appear is as follows:<\/p>\n\n\n\n
        \n
      • The first value is the top margin.<\/li>\n\n\n\n
      • The second value is the right margin.<\/li>\n\n\n\n
      • The third value is the bottom margin.<\/li>\n\n\n\n
      • The fourth value is the left margin.<\/li>\n<\/ul>\n\n\n\n
        Suppose we wanted to create a box with a 25px top margin, a 25px right margin, a 50px bottom margin, and a 60px left margin. We could do so using this code:<\/p>\n\n\n\n
        box {\n\tmargin: 25px 25px 50px 60px;\nborder: 1px solid red;\n}<\/pre><\/div>\n\n\n\n
        Our code returns:<\/p>\n\n\n\n
        \"\"\/<\/figure>\n\n\n\n
        In our example, we have created an inner box with a different margin on each edge based on the values we specified above. We have also surrounded our inner box with a 1px-wide solid red margin. In addition, we reuse the code for our blue box from earlier to illustrate the size of the margins we have applied to our box.<\/p>\n\n\n\n
        Three Values<\/h3>\n\n\n\n
        If you want to have a different top and bottom margin, but use the same margin for the left and right of a box, you can use the margin property and specify three values.<\/p>\n\n\n\n
        The order in which the three margins you specify are applied to a box is as follows:<\/p>\n\n\n\n
          \n
        • The first value is the top margin.<\/li>\n\n\n\n
        • The second value is the margin for the right and left sides of an element.<\/li>\n\n\n\n
        • The third value is the bottom margin.<\/li>\n<\/ul>\n\n\n\n
          Let\u2019s say we wanted to create a box with a 50px margin on the top of the box, a 25px margin on the left and right of the box, and a 60px margin on the bottom of the box. We could create a box with these margins using the following code:<\/p>\n\n\n\n
          Our code returns:<\/p>\n\n\n\n
          \"\"\/<\/figure>\n\n\n\n
          In our example, we have created an inner box with a different margin on each edge based on the values we specified above. We have also surrounded our inner box with a 1px-wide solid red margin. In addition, we reuse the code for our blue box from earlier to illustrate the size of the margins we have applied to our box.<\/p>\n\n\n\n
          Three Values<\/h3>\n\n\n\n
          If you want to have a different top and bottom margin, but use the same margin for the left and right of a box, you can use the margin property and specify three values.<\/p>\n\n\n\n
          The order in which the three margins you specify are applied to a box is as follows:<\/p>\n\n\n\n
            \n
          • The first value is the top margin.<\/li>\n\n\n\n
          • The second value is the margin for the right and left sides of an element.<\/li>\n\n\n\n
          • The third value is the bottom margin.<\/li>\n<\/ul>\n\n\n\n
            Let\u2019s say we wanted to create a box with a 50px margin on the top of the box, a 25px margin on the left and right of the box, and a 60px margin on the bottom of the box. We could create a box with these margins using the following code:<\/p>\n\n\n\n
            .box {\n\tmargin: 50px 25px 60px;\nborder: 1px solid red;\n}<\/pre><\/div>\n\n\n\n
            Our code returns:<\/p>\n\n\n\n
            \"\"\/<\/figure>\n\n\n\n
            As you can see, the left and right sides of our inner box have the same margin value\u201425px \u2014and the top and bottom sides have their own margins (50px and 60px, respectively).<\/p>\n\n\n\n
            In our code, we also defined a red border around our inner box to illustrate where our margins are applied. We also reuse the code from our first example to create a blue box which shows the gap our margins have created around the inner box.<\/p>\n\n\n\n
            Two Values<\/h3>\n\n\n\n
            If you want a box to have the same margin value for the top and bottom of the box and another value for the right and left sides of the box, you can use the margin property and specify two values.<\/p>\n\n\n\n
            The order in which the values you specify are applied to an element is:<\/p>\n\n\n\n
              \n
            • The first value is the margin for the top and bottom of the box.<\/li>\n\n\n\n
            • The second value is the margin for the right and left sides of the box.<\/li>\n<\/ul>\n\n\n\n
              Let\u2019s say you want to create a box with a 50px vertical margin and a 30px horizontal margin. You could create this box using the following CSS style:<\/p>\n\n\n\n
              .box {\n\tmargin: 50px 30px;\nborder: 1px solid red;\n}<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"\/<\/figure>\n\n\n\n
              The top and bottom of our box has a 50px margin, and the left and right sides both have a 30px margin.<\/p>\n\n\n\n
              In our code, we also specified a red border around our inner box to showcase the size of our margins. We also reuse the code from our previous examples to create a blue box which shows the space our margins create between the inner and an outer box.<\/p>\n\n\n\n
              One Value<\/h3>\n\n\n\n
              If you want every side of a box to have the same margin, you only need to specify one value when using the margin property. The value you specify will be the margin set around all borders for a box.<\/p>\n\n\n\n
              Suppose you want to create a box with 50px single margin around all borders. You could do so using this code:<\/p>\n\n\n\n
              .box {\n\tmargin: 50px;\n\tborder: 1px solid red;\n}<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"\/<\/figure>\n\n\n\n
              Every border of our box has a 50px margin. We specified a red border around our box to show that our margins are applied outside the box\u2019s border, and we also created a blue box in which our red box is placed to better illustrate our margins.<\/p>\n\n\n\n
              Margin inherit<\/h2>\n\n\n\n
              The inherit value is used to inherit a margin from a parent element.<\/p>\n\n\n\n
              To set the margin of an inner box to be the same as the margin for an outer box, we can use the inherit value. The inherit value is useful because if you change the margin of the parent element, the margin of the child element\u2014the box within the parent element\u2014will automatically adjust.<\/p>\n\n\n\n
              Suppose we are designing a box whose parent element has a 50px left margin. We want the box contained within our parent element to have the same margin value. We could use the following code to accomplish this task:<\/p>\n\n\n\n
              .box {\n\tmargin-left: inherit;\n\tborder: 1px solid red;\n}\n.outer {\n\tmargin-left: 50px;\n\tborder: 1px solid blue;\n}<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"\/<\/figure>\n\n\n\n
              Our outer box (the one with a blue border) has a left margin of 50px. In addition, our inner box (the one with a red border) has a left margin of 50px, which it inherited from its parent element.<\/p>\n\n\n\n
              Margin auto<\/h2>\n\n\n\n
              The auto value is used to center an element horizontally within its container.<\/p>\n\n\n\n
              The auto value will make an inner element take up a certain width based on the value you have defined, then the remaining space will be divided between the left and right margins.<\/p>\n\n\n\n
              Let\u2019s say that you have created a box with a 250px width inside a box with a 500px width. If you used the auto keyword to create a margin, a 125px margin would be applied to both the left and right of the box. We calculated this using the following formula:<\/p>\n\n\n\n
              (Outer Box Width - Inner Box Width) \/ 2<\/pre><\/div>\n\n\n\n
              In this case, we used the following sum to calculate the side of our automatically-generated margins:<\/p>\n\n\n\n
              (500 - 250) \/ 2<\/pre><\/div>\n\n\n\n
              The answer to this problem is 125, which is the margin value that will be applied to both the left and right margins of a box. Here\u2019s an example of a box that uses these dimensions:<\/p>\n\n\n\n
              index.html\n<div class=\"outer\">\n<p class=\"box\">\n\tThis is a box.\n<\/p>\n<\/div><\/pre><\/div>\n\n\n\n
              styles.css\n.box {\n\twidth: 250px;\n\tmargin: auto;\n\tborder: 1px solid red;\n}\n.outer {\n\twidth: 500px;\n\tborder: 1px solid blue;\n}<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"\/<\/figure>\n\n\n\n
              As you can see, an equal margin on both the left and right sides of our inner box (the one with a red border) has been created. In other words, our inner box is horizontally centered. This is because we used the margin: auto value to specify our margin for our inner box.<\/p>\n\n\n\n
              Our inner box does not have any margins on the top or bottom edges, because we did not specify any for our example.<\/p>\n\n\n\n
              Conclusion<\/h2>\n\n\n\n
              The CSS margin property is used to create a space between the border of an element and other elements on the web page.<\/p>\n\n\n\n
              With reference to examples, this tutorial discussed how to use the CSS margin property, and how to use its four subproperties, to create spaces between an element\u2019s border and other elements on a web page. Now you\u2019re equipped with the tools you need to start using the CSS margin property like a pro!<\/p>\n","protected":false},"excerpt":{"rendered":"Adding spaces between elements on a web page is a crucial part of designing aesthetically pleasing and functional user experiences. Margins are used to create an empty area around an HTML element to separate the element from other objects on the web page. The CSS margin property, and its four subproperties, are used to set…","protected":false},"author":240,"featured_media":14638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14637","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Margin: how to use the margin property and its subproperties<\/title>\n<meta name=\"description\" content=\"The CSS margin property is used to create space around an element\u2019s borders. On Career Karma, learn how to use the margin property.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-margin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Margin\" \/>\n<meta property=\"og:description\" content=\"The CSS margin property is used to create space around an element\u2019s borders. On Career Karma, learn how to use the margin property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-margin\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-14T05:01:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:37:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Margin\",\"datePublished\":\"2020-04-14T05:01:53+00:00\",\"dateModified\":\"2023-12-01T10:37:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/\"},\"wordCount\":2104,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-margin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-margin\/\",\"name\":\"CSS Margin: how to use the margin property and its subproperties\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg\",\"datePublished\":\"2020-04-14T05:01:53+00:00\",\"dateModified\":\"2023-12-01T10:37:08+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS margin property is used to create space around an element\u2019s borders. On Career Karma, learn how to use the margin property.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-margin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-margin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Margin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Margin: how to use the margin property and its subproperties","description":"The CSS margin property is used to create space around an element\u2019s borders. On Career Karma, learn how to use the margin property.","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:\/\/careerkarma.com\/blog\/css-margin\/","og_locale":"en_US","og_type":"article","og_title":"CSS Margin","og_description":"The CSS margin property is used to create space around an element\u2019s borders. On Career Karma, learn how to use the margin property.","og_url":"https:\/\/careerkarma.com\/blog\/css-margin\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-14T05:01:53+00:00","article_modified_time":"2023-12-01T10:37:08+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-margin\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Margin","datePublished":"2020-04-14T05:01:53+00:00","dateModified":"2023-12-01T10:37:08+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-margin\/"},"wordCount":2104,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-margin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-margin\/","url":"https:\/\/careerkarma.com\/blog\/css-margin\/","name":"CSS Margin: how to use the margin property and its subproperties","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg","datePublished":"2020-04-14T05:01:53+00:00","dateModified":"2023-12-01T10:37:08+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS margin property is used to create space around an element\u2019s borders. On Career Karma, learn how to use the margin property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-margin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/notebook-beside-the-iphone-on-table-196644-1.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-margin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Margin"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14637"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14637\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14638"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}