{"id":14753,"date":"2020-06-26T13:45:16","date_gmt":"2020-06-26T20:45:16","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14753"},"modified":"2020-12-29T11:41:23","modified_gmt":"2020-12-29T19:41:23","slug":"css-padding","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-padding\/","title":{"rendered":"CSS Padding: A Step-By-Step Guide"},"content":{"rendered":"\n

The CSS padding property creates a space between an element\u2019s borders and content contained inside of that element. Padding has subproperties that allow for unique padding sizes on all sides and accepts inherit, length, and percentage as values.<\/em><\/p>\n\n\n\n

\n\n\n\n

When you\u2019re designing a web element, you may want a space to appear between the contents of the element and its borders. For instance, if you\u2019re designing a box with text inside, you may want some space between the text inside the box and the borders of the box.
<\/p>\n\n\n\n

That\u2019s where the CSS padding property comes in. The CSS padding property creates a space between the contents of an element and the borders defined for that element.
<\/p>\n\n\n\n

This tutorial will discuss, with examples, how to use the padding property in CSS.
<\/p>\n\n\n\n

CSS Padding<\/h2>\n\n\n\n

The CSS padding property allows you to add space between an element and its borders.
<\/p>\n\n\n\n

The padding property is shorthand for the four CSS padding subproperties that set the top, right, bottom, and left sides of an HTML element.
<\/p>\n\n\n\n

The padding for a box is different from the margin property in CSS. Whereas the padding property allows you to add space within the borders of an element, the margin property allows you to add space around the outside of an element\u2019s borders.
<\/p>\n\n\n\n

SPACE-ADDING PROPERTIES IN CSS<\/strong><\/p>\n\n\n\n
PROPERTY<\/strong><\/td>FUNCTION<\/strong><\/td><\/tr>
padding<\/td>Adds space between an element and its borders.<\/td><\/tr>
margin<\/td>Adds space around (outside) the borders of an element.<\/td><\/tr><\/tbody><\/table>\n\n\n\n

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

There are four properties used to specify the padding for each side of an element. These are:
<\/p>\n\n\n\n

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

    See below for a visual representation of the four subproperties of padding in CSS.
    <\/p>\n\n\n\n

    Visual Representation of CSS Padding Subproperties<\/strong><\/p>\n\n\n\n

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

    <\/p>\n\n\n\n

    In CSS, all padding properties can accept three different values. These are:
    <\/p>\n\n\n\n

    • inherit<\/strong>. Specifies the padding that an element should inherit from a parent.<\/li>
    • length<\/strong>. Defines the length of an element\u2019s padding (in px, em, cm, etc.).<\/li>
    • percentage (%)<\/strong>. <\/strong>Specifies the padding of an element as a percentage of it\u2019s parent element’s width.<\/li><\/ul>\n\n\n\n

      Suppose we are designing a box for a website. We want the box to have a 25px padding on the left and right sides, and a 40px padding above (top) and below (bottom) the box.
      <\/p>\n\n\n\n

      We could use the following code to accomplish this task:
      <\/p>\n\n\n\n

      index.html\n\n<div class="box">\n  <p>\n  This is a box\n  <\/p>\n<\/div>\n\nstyles.css\n\n.box {\n\tpadding-top: 40px;\n\tpadding-bottom: 40px;\n\tpadding-left: 25px;\n\tpadding-right: 25px;\n\tborder: 1px solid blue;\n}\n\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      In this example, we defined a <div> element to create our box model. Inside our <div> tag is a <p> tag. This <p> tag contains the text This is a box. We also created a CSS property called .box that stores the styles we apply to our <div> tag.
      <\/p>\n\n\n\n
      Our CSS property sets the padding for the top and the bottom of our box to 40px and the padding for the left and right sides of the box to 25px. We also specified a 1px solid blue border around our box. This allows us to see the padding effect in action.
      <\/p>\n\n\n\n
      While this code is clear, there is a way to shorten it. We can do so using the CSS padding shorthand property. We may decide to do this to make our code more readable.
      <\/p>\n\n\n\n
      CSS Padding Shorthand<\/h2>\n\n\n\n
      The padding property (aka \u201cpadding attribute\u201d) is shorthand for the four above-mentioned individual padding properties in CSS. By using the padding property, you can define the padding for an HTML element on one line.
      <\/p>\n\n\n\n
      The syntax for the padding shorthand is as follows:
      <\/p>\n\n\n\n
      padding: value1 value2 value3 value4;
      <\/p>\n\n\n\n
      When using the padding attribute, you must specify at least one value.
      <\/p>\n\n\n\n
      The padding shorthand works in different ways depending on how many values you specify. Let\u2019s walk through an example of how the padding property works in all potential use cases.
      <\/p>\n\n\n\n
      Four Values<\/h3>\n\n\n\n
      Suppose you want to add padding on all sides of a HTML element.
      <\/p>\n\n\n\n
      You can do so by using the padding property and specifying four values. The values you specify should use the following order:
      <\/p>\n\n\n\n
      • The first<\/strong> value is the top<\/strong> padding.<\/li>
      • The second<\/strong> value is the right<\/strong> padding.<\/li>
      • The third<\/strong> value is the bottom<\/strong> padding.<\/li>
      • The fourth<\/strong> value is the left<\/strong> padding.<\/li><\/ul>\n\n\n\n
        Consider the below visual representation for a depiction of this.
        <\/p>\n\n\n\n
        Visual Representation of Numbered<\/em> CSS Padding Subproperties<\/strong><\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        <\/p>\n\n\n\n
        Here\u2019s an example that uses the padding property to add padding around all four sides of an element:
        <\/p>\n\n\n\n
        .box {\n\tpadding: 40px 25px 40px 25px;\n\tborder: 1px solid blue;\n}\n\n<\/pre><\/div>\n\n\n\n
        Our code returns:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        In this example, we used the padding property to add padding around the contents of our box. Here are the values we specified for our padding:
        <\/p>\n\n\n\n
        • Top: 40px<\/li>
        • Right: 25px<\/li>
        • Bottom: 40px<\/li>
        • Left: 25px<\/li><\/ul>\n\n\n\n
          We also specified a 1px-wide solid blue border to make it easy to see where we applied the padding. As you can see in the above example, we are able to define an element\u2019s padding using just one line of code (instead of four).
          <\/p>\n\n\n\n
          Three Values<\/h3>\n\n\n\n
          If you want the right and left paddings of an element to be the same, but you want to use different top and bottom values, you can specify three values using the padding property.
          <\/p>\n\n\n\n
          Here\u2019s the order in which values should appear when specifying three values with the padding property:
          <\/p>\n\n\n\n
          • The first<\/strong> value is the top<\/strong> padding.<\/li>
          • The second<\/strong> value is the right<\/strong> and left<\/strong> padding.<\/li>
          • The third<\/strong> value is the bottom<\/strong> padding.<\/li><\/ul>\n\n\n\n
            Suppose we want to create a box with a 50px top padding, 75px bottom padding, and 100px padding on both the left and right sides. We can do so using this code:
            <\/p>\n\n\n\n
            .box {\n\tpadding: 50px 100px 75px;\n\tborder: 1px solid blue;\n}\n<\/pre><\/div>\n\n\n\n
            Our code returns:<\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            In this example, the padding on both the left and right sides of the box is 100px, but we specified different padding values for the top (50px) and the bottom (75px) of the box. 
            <\/p>\n\n\n\n
            As in the examples above, we specified a blue border around our box so we can see where our padding takes effect.
            <\/p>\n\n\n\n
            Two Values<\/h3>\n\n\n\n
            If the top and bottom paddings of an element should be the same, and the right and left padding should also be the same, you can specify two values with the padding property.
            <\/p>\n\n\n\n
            The order in which values should appear if you specify two paddings with the padding property is:
            <\/p>\n\n\n\n
            • The first<\/strong> value is the top<\/strong> and bottom<\/strong> paddings.<\/li>
            • The second<\/strong> value is the right<\/strong> and left<\/strong> paddings.<\/li><\/ul>\n\n\n\n
              Let\u2019s suppose we want to create a box with 50px padding on the top and bottom of the element, and 75px padding on the left and the right sides of the element. We can do so using this code:
              <\/p>\n\n\n\n
              .box {\n\tpadding: 50px 75px;\n\tborder: 1px solid blue;\n}\n<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"<\/figure>\n\n\n\n
              In this example, the padding for the top and bottom of our box is the same: 50px. The padding for the left and right edges of the box are both set to 75px. 
              <\/p>\n\n\n\n
              As above, we also specified a blue border so we can easily see the padding around our box.
              <\/p>\n\n\n\n
              One Value<\/h3>\n\n\n\n
              If you want to add the same amount of padding around all sides of an element, you only need to specify one value when using the padding attribute. The one value you specify is the padding that will be applied to all sides of a particular element.
              <\/p>\n\n\n\n
              Here\u2019s an example of a CSS style that will add a 20px padding around all edges of the elements within a box:
              <\/p>\n\n\n\n
              .box {\n\tpadding: 20px;\n}\n<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"<\/figure>\n\n\n\n
              Our above box has a 20px padding around every edge of the element within the box.
              <\/p>\n\n\n\n
              Padding, Width, and the Box-Sizing CSS Property<\/h2>\n\n\n\n
              Often, when you\u2019re designing an element in CSS, you\u2019ll use the width property to specify the width of an element. However, if you use the width property in combination with the padding property, a few problems can arise.
              <\/p>\n\n\n\n
              If you apply padding to an element with a specific width, the padding specified for that element will be added to the total width of the element. So, for instance, if you\u2019re designing a box that should be 200px wide and specify a padding of 20px, the total width of the box will be set to 240px (20px for the left padding + 20px for the right padding).
              <\/p>\n\n\n\n
              Here\u2019s a code snippet that illustrates this effect in action:
              <\/p>\n\n\n\n
              .box {\n\twidth: 200px;\n\tpadding: 20px;\n\tborder: 1px solid blue;\n}\n\n.box2 {\n\twidth: 200px;\n\tborder: 1px solid blue;\n}\n<\/pre><\/div>\n\n\n\n
              Here is the result of our code:<\/p>\n\n\n\n
              \"\"<\/figure>\n\n\n\n
              On the top we have a box with a 20px padding, and on the bottom we have a box with no padding. As you can see, the total width of the second box is 200px. However, for the reasons we discussed earlier, the total width of our first box is 240px.
              <\/p>\n\n\n\n
              If we want our top box to have the width 200px even if a padding value is specified, we can use the box-sizing CSS property. Here\u2019s an example of this property in action:
              <\/p>\n\n\n\n
              .box {\n\twidth: 200px;\n\tpadding: 20px;\n\tbox-sizing: border-box;\n\tborder: 1px solid blue;\n}\n\n.box2 {\n\twidth: 200px;\n\tborder: 1px solid blue;\n}\n<\/pre><\/div>\n\n\n\n
              Our code returns:<\/p>\n\n\n\n
              \"\"<\/figure>\n\n\n\n
              Both of our boxes now have the width 200px. The box-sizing property instructs our first box to retain its width even though the code specifies a padding value that under default conditions would result in a wider box.
              <\/p>\n\n\n\n
              Conclusion<\/h2>\n\n\n\n
              The CSS padding property is used to specify the space that should appear between an element and its border. The padding property has four subproperties, each of which allows you to set the padding for an edge\u2014or edges\u2014of an element.
              <\/p>\n\n\n\n
              This tutorial discussed how to use the CSS padding property and its subproperties. We used examples to illustrate the concepts discussed here. Now you have the knowledge you need to start using the padding property and its subproperties in your CSS code like a pro!<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS padding property creates a space between an element\u2019s borders and content contained inside of that element. Padding has subproperties that allow for unique padding sizes on all sides and accepts inherit, length, and percentage as values. When you\u2019re designing a web element, you may want a space to appear between the contents of…","protected":false},"author":77,"featured_media":14754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14753","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":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Padding: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS padding property adds space between an element and its contents. On Career Karma, learn how to use the padding 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-padding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Padding: A Step-By-Step Guide\" \/>\n<meta property=\"og:description\" content=\"The CSS padding property adds space between an element and its contents. On Career Karma, learn how to use the padding property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-padding\/\" \/>\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-06-26T20:45:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:41:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\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=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Padding: A Step-By-Step Guide\",\"datePublished\":\"2020-06-26T20:45:16+00:00\",\"dateModified\":\"2020-12-29T19:41:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/\"},\"wordCount\":1589,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-padding\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-padding\/\",\"name\":\"CSS Padding: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg\",\"datePublished\":\"2020-06-26T20:45:16+00:00\",\"dateModified\":\"2020-12-29T19:41:23+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"The CSS padding property adds space between an element and its contents. On Career Karma, learn how to use the padding property.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-padding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-padding\/#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 Padding: A Step-By-Step Guide\"}]},{\"@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\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Padding: A Step-By-Step Guide | Career Karma","description":"The CSS padding property adds space between an element and its contents. On Career Karma, learn how to use the padding 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-padding\/","og_locale":"en_US","og_type":"article","og_title":"CSS Padding: A Step-By-Step Guide","og_description":"The CSS padding property adds space between an element and its contents. On Career Karma, learn how to use the padding property.","og_url":"https:\/\/careerkarma.com\/blog\/css-padding\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-26T20:45:16+00:00","article_modified_time":"2020-12-29T19:41:23+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-padding\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Padding: A Step-By-Step Guide","datePublished":"2020-06-26T20:45:16+00:00","dateModified":"2020-12-29T19:41:23+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-padding\/"},"wordCount":1589,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-padding\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-padding\/","url":"https:\/\/careerkarma.com\/blog\/css-padding\/","name":"CSS Padding: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg","datePublished":"2020-06-26T20:45:16+00:00","dateModified":"2020-12-29T19:41:23+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"The CSS padding property adds space between an element and its contents. On Career Karma, learn how to use the padding property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-padding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/woman-wearing-black-framed-eyeglasses-and-teal-button-up-7363.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-padding\/#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 Padding: A Step-By-Step Guide"}]},{"@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\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14753","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\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14753"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14753\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14754"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}