{"id":14087,"date":"2011-09-05T21:00:43","date_gmt":"2011-09-06T04:00:43","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14087"},"modified":"2021-09-21T15:18:13","modified_gmt":"2021-09-21T22:18:13","slug":"padding","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/","title":{"rendered":"padding"},"content":{"rendered":"
The Padding values are set using lengths<\/a> or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is Here’s a simple example:<\/p>\n The example above is using the If fewer than four values are set, the missing values are assumed based on the ones that are defined. For example, the following two rule sets would get identical results:<\/p>\n Thus, if only one value is defined, this sets all four padding properties to the same value:<\/p>\n If three values are declared, it is Any of the individual padding properties can be declared using longhand, in which case you would define only one value per property. So the previous example could be rewritten as follows:<\/p>\n If an element has a specified width, any padding added to that element will add to the total width of the element. This is often an undesirable result, as it requires that an element’s width be recalculated each time the padding is adjusted. (Note that this also happens with height, but in most cases it is preferred not to give an element a set height.)<\/p>\n For example:<\/p>\n In this example, although the This happens in order to maintain 400px of content space, rather than 400px of total element width. Here’s a Pen demonstrating this:<\/p>\n This occurs in all in-use browsers, in standards mode, but will not occur in IE6 and IE7 in quirks mode (that is, on pages displayed in IE6 or IE7 where there is no doctype declared or where something else is happening to trigger quirks mode).<\/p>\n To resolve this issue, thus keeping the width at 400px no matter the amount of padding, you can use the This causes the element to maintain its width<\/a> while increasing the padding, thus decreasing the available content space. Here is a demonstration:<\/p>\n The padding property in CSS defines the innermost portion of the box model, creating space around an element’s content, inside of any defined margins and\/or borders. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0. Here’s a simple example: .box […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13941,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":352410,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-block\/","url_meta":{"origin":14087,"position":0},"title":"padding-block","date":"September 23, 2021","format":false,"excerpt":"padding-block is a CSS logical shorthand property that combines the padding-block-start and padding-block-end properties into a single declaration, creating space around an element\u2019s content in the block (top and bottom) direction. .element { padding-block: 30px 60px; writing-mode: vertical-rl; \/* Determines the padding block direction *\/ } When we say that\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352421,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-inline\/","url_meta":{"origin":14087,"position":1},"title":"padding-inline","date":"September 23, 2021","format":false,"excerpt":"padding-inline is a CSS logical shorthand property that combines the padding-inline-start and padding-inline-end properties into a single declaration, creating space around an element\u2019s content in the inline (left and right) direction. .element { padding-inline: 30px 60px; writing-mode: vertical-rl; \/* Determines the padding block direction *\/ } When we say that\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14069,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/","url_meta":{"origin":14087,"position":2},"title":"margin","date":"September 5, 2011","format":false,"excerpt":"The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders. Margins are set using lengths, percentages, or the keyword auto and can have negative values. Here's an example: .box { margin: 0 3em 0 3em; } margin is a\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":331047,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-clip\/","url_meta":{"origin":14087,"position":3},"title":"mask-clip","date":"December 18, 2020","format":false,"excerpt":"The mask-clip CSS property is part of the CSS Masking Module Level 1 specification, and sets the mask painting area. It literally clips the background area of an element and defines which areas show through the mask: border, padding or content box. It\u2019s sort of like putting the frame on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324740,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/","url_meta":{"origin":14087,"position":4},"title":"mask-origin","date":"October 29, 2020","format":false,"excerpt":"The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it's the edge of the border, padding or content box. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-origin: content-box; } For elements rendered as\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196160,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/","url_meta":{"origin":14087,"position":5},"title":"background-origin","date":"February 17, 2015","format":false,"excerpt":"The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding. There are four values: border-box, padding-box, content-box and inherit. Here\u2019s a demo: CodePen Embed Fallback background-origin is similar to background-clip, except it resizes the background rather than clipping it. The\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14087"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14087"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14087\/revisions"}],"predecessor-version":[{"id":352422,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14087\/revisions\/352422"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13941"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14087"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}padding<\/code> property in CSS defines the innermost portion of the box model<\/a>, creating space around an element’s content, inside of any defined margins and\/or borders.<\/p>\n
0<\/code>.<\/p>\n
.box {\n padding: 0 1.5em 0 1.5em;\n}<\/code><\/pre>\n
padding<\/code> shorthand property, which accepts up to four values, shown here:<\/p>\n
.box {\n padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>\n}<\/padding-left><\/padding-bottom><\/padding-right><\/padding-top><\/code><\/pre>\n
.box {\n padding: 0 1.5em;\n}\n\n.box {\n padding: 0 1.5em 0 1.5em;\n}<\/code><\/pre>\n
.box {\n padding: 20px;\n}<\/code><\/pre>\n
padding: [top] [left-and-right] [bottom];<\/code>.<\/p>\n
.box {\n padding-top: 20px;\n padding-right: 20px;\n padding-bottom: 20px;\n padding-left: 20px;\n}<\/code><\/pre>\n
Padding and Element Width Calculations<\/h4>\n
.box {\n padding: 20px;\n width: 400px;\n}<\/code><\/pre>\n
.box<\/code> element is given an explicit width of 400px, the actual rendered width of the element on the page will be 440px. This takes into account not only the 400px width, but also the 20px of left padding and the 20px of right padding (defined with padding shorthand in the previous example).<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
box-sizing<\/a><\/code> property:<\/p>\n
.box {\n padding: 20px;\n width: 400px;\n box-sizing: border-box;\n}<\/code><\/pre>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
Related Properties<\/h3>\n
\n
Other Resources<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n Yep<\/td>\n Yep<\/td>\n Yep<\/td>\n Yep<\/td>\n Yep<\/td>\n Yep<\/td>\n Yep<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"