{"id":14134,"date":"2011-09-06T19:00:03","date_gmt":"2011-09-07T02:00:03","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14134"},"modified":"2021-03-03T09:20:29","modified_gmt":"2021-03-03T17:20:29","slug":"width","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/w\/width\/","title":{"rendered":"width"},"content":{"rendered":"\n<p>The <code>width<\/code> property in CSS specifies the width of the element&#8217;s content area. This &#8220;content&#8221; area is the portion inside the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/\">padding<\/a>, <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/\">border<\/a>, and <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/\">margin<\/a> of an element (<a href=\"https:\/\/css-tricks.com\/the-css-box-model\/\">the box model<\/a>).<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.wrap { \n  width: 80%;\n}<\/code><\/pre>\n\n\n\n<p>In the example above, elements that have a class name of <code>.wrap<\/code> will be 80% as wide as their parent element. The accepted values are any of the <a href=\"https:\/\/css-tricks.com\/the-lengths-of-css\/\">length values<\/a>, in addition to some keywords we&#8217;ll cover later.<\/p>\n\n\n\n<p>Width can be overridden by the closely correleated properties <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/min-width\/\"><code>min-width<\/code><\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-width\/\"><code>max-width<\/code><\/a>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.wrapper-1 {\n  width: 100%;\n  max-width: 320px; \/* Will be AT MOST 320px wide *\/\n}\n\n.wrapper-2 {\n  width: 100%;\n  min-width: 20em; \/* Will be AT LEAST 20em wide *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBEQGrp\" src=\"\/\/codepen.io\/anon\/embed\/qBEQGrp?height=450&amp;theme-id=1&amp;slug-hash=qBEQGrp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBEQGrp\" title=\"CodePen Embed qBEQGrp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"digging-deeper\">Digging deeper<\/h3>\n\n\n<p>When using percentage (%) for width, authors must be aware that the percentage is based on the element&#8217;s parent, or in other words, the width of the containing block. If your parent is set at 480px &#8211; as demonstrated by our demo &#8211; then the percentage is based on that value. So in our case 50% of 480px leaves us with 240px as a computed pixel value.<\/p>\n\n\n\n<p>Note that <code>width<\/code> applies to all elements except <a href=\"http:\/\/www.w3.org\/TR\/html5\/rendering.html#non-replaced-elements\" rel=\"noopener\">non-replaced<\/a> or <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/visuren.html#inline-boxes\" rel=\"noopener\">inline elements<\/a>, table rows and <a href=\"http:\/\/www.w3.org\/TR\/html401\/struct\/tables.html#h-11.2.3\" rel=\"external noopener\">row groups<\/a> (i.e. <code>thead<\/code>, <code>tfoot<\/code> and <code>tbody<\/code>). There seems to be a slight mismatch as far as how <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/rendering.html#non-replaced-elements\" rel=\"noopener\">HTML defines non-replaced elements<\/a> and <a href=\"https:\/\/drafts.csswg.org\/css-display-3\/#non-replaced\" rel=\"noopener\">how CSS defines it<\/a>, but we&#8217;re referring to it the way CSS does: elements whose content is not defined by the tag itself, such as an <code>&lt;img&gt;<\/code>&nbsp;with the <code>src<\/code>&nbsp;attribute.<\/p>\n\n\n\n<p>For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_joniB\" src=\"\/\/codepen.io\/anon\/embed\/joniB?height=350&amp;theme-id=1&amp;slug-hash=joniB&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed joniB\" title=\"CodePen Embed joniB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"keyword-values\">Keyword values<\/h3>\n\n\n<p>With some special keyword values, it is possible to define width (and\/or height) according to the content of the element.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"mincontent\"><code>min-content<\/code><\/h4>\n\n\n<p>The <code>min-content<\/code> value is the smallest measure that would fit around its content if all <strong>soft wrap opportunities<\/strong> within the box were taken.<\/p>\n\n\n\n<p>The best example for this kind of value is a properly written <code>figure<\/code> element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\"><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/images\/kitten.jpg\" alt=\"\"\/><figcaption>What a lovely kitten we got there in this image which is encapsulated in a figure element. How dear, look how long this caption is!<\/figcaption><\/figure>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\"><\/code><\/pre>\n\n\n\n<p>Once we have applied some basic styles to this markup, we get:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qmFln\" src=\"\/\/codepen.io\/anon\/embed\/qmFln?height=450&amp;theme-id=1&amp;slug-hash=qmFln&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qmFln\" title=\"CodePen Embed qmFln\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior, but what if we wanted to center it? <code>min-content<\/code> allows us to center it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qoubH\" src=\"\/\/codepen.io\/anon\/embed\/qoubH?height=450&amp;theme-id=1&amp;slug-hash=qoubH&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qoubH\" title=\"CodePen Embed qoubH\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Because we&#8217;ve assigned <code>min-content<\/code> to the <code>figure<\/code> element, it takes the minimum width it can have when taking all soft wrap opportunities (like spaces between words) so that the content still fits in the box.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"maxcontent\"><code>max-content<\/code><\/h4>\n\n\n<p>The <code>max-content<\/code> property refers to the narrowest measure a box could take while fitting around its content &#8211; if no soft wrap opportunities within the element were taken.<\/p>\n\n\n\n<p>Check out what happens if we apply this to our simple kitten\/figure demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qzvgc\" src=\"\/\/codepen.io\/anon\/embed\/qzvgc?height=450&amp;theme-id=1&amp;slug-hash=qzvgc&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qzvgc\" title=\"CodePen Embed qzvgc\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Because the caption is very longer than the image is wide (it doesn&#8217;t take any soft wrap opportunity, like the spaces between words), it means it has to display the caption on a single line, thus the <code>figure<\/code> is as wide as that line.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"fillavailable\"><code>fill-available<\/code><\/h4>\n\n\n<p>???. One of life&#8217;s great mysteries.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"fitcontent\"><code>fit-content<\/code><\/h4>\n\n\n<p>The <code>fit-content<\/code> value is roughly equivalent to <code>margin-left: auto<\/code> and <code>margin-right: auto<\/code> in behaviour, except it works for unknown widths.<\/p>\n\n\n\n<p>For instance, let&#8217;s say we need to center an inline navigation across the page. Your best bet would be to apply <code>text-align: center<\/code> to the <code>ul<\/code>, and <code>display: inline-block<\/code> to the <code>li<\/code>. This would give you something like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xJlzg\" src=\"\/\/codepen.io\/anon\/embed\/xJlzg?height=450&amp;theme-id=1&amp;slug-hash=xJlzg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xJlzg\" title=\"CodePen Embed xJlzg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>However, the blue background (from the <code>ul<\/code> element) spreads across the entire document because the <code>ul<\/code> is a block-level element, which means its width is restricted only by its containing element. What if we want to have the blue background collapsing around the list items? <code>fit-content<\/code> to the rescue!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_uJFAb\" src=\"\/\/codepen.io\/anon\/embed\/uJFAb?height=450&amp;theme-id=1&amp;slug-hash=uJFAb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed uJFAb\" title=\"CodePen Embed uJFAb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>With <code>fit-content<\/code> and <code>margin: 1em auto<\/code>, this works like a charm and only the navigation has a colored background, not the whole document width.<\/p>\n\n\n\n<p>If you&#8217;re into this sort of thing, you&#8217;ll be happy to know the formula to define the size of a fit-content length is:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">fit-content = min(max-content, max(min-content, fill-available))<\/code><\/pre>\n\n\n\n<p>This is a pretty unused value, so if you come up with a great use-case, let us know!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_width\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-14134\">\n\n  <time datetime=\"2021-02-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 1, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/exploring-the-complexities-of-width-and-height-in-css\/\">\n      Exploring the Complexities of Width and Height in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/layout\/\" rel=\"tag\">layout<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/width\/\" rel=\"tag\">width<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/urishaked\/\" aria-label=\"Author page of Uri Shaked\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/6e852853533bd0d89aeb28ee4d64369d?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/6e852853533bd0d89aeb28ee4d64369d?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/urishaked\/\">\n      Uri Shaked    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-14134\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/h\/height\/\">\n      height    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/h\/height\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { height: 500px; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/layout\/\" rel=\"tag\">layout<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/width\/\" rel=\"tag\">width<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14134\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-height\/\">\n      max-height    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-height\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { max-height: 3rem; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/layout\/\" rel=\"tag\">layout<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/width\/\" rel=\"tag\">width<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14134\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-width\/\">\n      max-width    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-width\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { max-width: 100%; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/layout\/\" rel=\"tag\">layout<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/width\/\" rel=\"tag\">width<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14134\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 26, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/min-height\/\">\n      min-height    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/min-height\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { min-height: 100vh; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/layout\/\" rel=\"tag\">layout<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/width\/\" rel=\"tag\">width<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14134\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/min-width\/\">\n      min-width    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/min-width\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { min-width: 300px; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/layout\/\" rel=\"tag\">layout<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/width\/\" rel=\"tag\">width<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The width property in CSS specifies the width of the element&#8217;s content area. This &#8220;content&#8221; area is the portion inside the padding, border, and margin of an element (the box model). In the example above, elements that have a class name of .wrap will be 80% as wide as their parent element. The accepted values [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13955,"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":[586,1184],"acf":[],"jetpack-related-posts":[{"id":376323,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","url_meta":{"origin":14134,"position":0},"title":"border-image-width","date":"January 12, 2023","format":false,"excerpt":"The CSS border-image-width property is used to determine the width of the border\u2019s image file, as provided by the CSS border-image-source property. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; } CodePen Embed Fallback The border-image-width property is defined in the CSS Backgrounds and\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":355486,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-border\/","url_meta":{"origin":14134,"position":1},"title":"mask-border","date":"November 3, 2021","format":false,"excerpt":"The mask-border CSS property sets a border image to an element\u2019s masked border area. It is s shorthand for setting the mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode properties in a single declaration.","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_A4675D262DA10437B039C41DDD674601F72A8FFCAB2801EE4264E0D51AB8C554_1634664377390_slice.png?fit=1000%2C1000&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323112,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/","url_meta":{"origin":14134,"position":2},"title":"inline-size","date":"October 14, 2020","format":false,"excerpt":"inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical. .element { \u00a0 inline-size: 700px; \u00a0 writing-mode: vertical-lr; } As you might have guessed by the example above, the writing-mode property changes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":14134,"position":3},"title":"block-size","date":"August 25, 2021","format":false,"excerpt":"block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical. .element { block-size: 700px; writing-mode: vertical-lr; } block-size is defined in the CSS Logical Properties and Values Level 1 specification which\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":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":14134,"position":4},"title":"outline-width","date":"August 10, 2021","format":false,"excerpt":"The outline-width CSS property specifies the thickness of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button:focus { outline-width: 5px; } We\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":376581,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-outset\/","url_meta":{"origin":14134,"position":5},"title":"border-image-outset","date":"January 31, 2023","format":false,"excerpt":"The CSS\u00a0border-image-outset\u00a0property sets distance between an element\u2019s\u00a0border-image\u00a0area and how far it goes beyond the element\u2019s\u00a0border-box. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; border-image-outset: 2; } CodePen Embed Fallback The border-image-outset property is defined in the CSS Backgrounds and Borders Module Level 3 specification.\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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14134"}],"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=14134"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14134\/revisions"}],"predecessor-version":[{"id":335759,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14134\/revisions\/335759"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14134"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}