{"id":25154,"date":"2018-11-27T22:27:03","date_gmt":"2018-11-27T14:27:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25154"},"modified":"2024-04-04T01:15:35","modified_gmt":"2024-04-03T17:15:35","slug":"css-margin-auto","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/","title":{"rendered":"How margin:auto in CSS Works"},"content":{"rendered":"<p>Centering a block element horizontally with <code>margin:auto<\/code> is a common technique, but the specifics of how and why it works can be intriguing. To demystify this, we\u2019ll dive into the workings of <code>margin:auto<\/code>. This includes exploring its functionality for vertical centering and addressing several related nuances.<\/p>\n<p>But let\u2019s start at the beginning: <strong>what exactly does <code>auto<\/code> mean in this context?<\/strong><\/p>\n<p>The meaning of <code>auto<\/code> in CSS margins is context-dependent, varying based on the element and its type. Essentially, it signifies either occupying any available space or reverting to 0 pixels. These interpretations significantly influence an element\u2019s layout.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/\" class=\"ref-block__link\" title=\"Read More: 6 Ways to Align Content Vertically with CSS\" rel=\"bookmark\"><span class=\"screen-reader-text\">6 Ways to Align Content Vertically with CSS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-tricks-vertical-align-content.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23246 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-tricks-vertical-align-content.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">6 Ways to Align Content Vertically with CSS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tLet's discuss vertical alignment in CSS, or more accurately, how it's not straightforward. CSS hasn't provided an official...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>How \u201cAuto\u201d Centers Content by Filling Space<\/h2>\n<p>One of the most frequent encounters with <code>margin:auto<\/code> is its ability to center an element within its container. This magic happens when <code>auto<\/code> is applied to an element\u2019s left and right margins, allowing them to equally absorb any available horizontal space, thus centering the element.<\/p>\n<p><iframe height=\"257\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/qOPddb\/?height=257&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/qOPddb\/\">margin:auto<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<p>It\u2019s crucial to note that this technique is specific to horizontal centering. Additionally, it doesn\u2019t apply to elements that are floated, inline, or positioned as absolute or fixed \u2013 but we\u2019ll explore ways to circumvent these limitations.<\/p>\n<h3>Creating a Faux Float with \u201cAuto\u201d<\/h3>\n<p>What occurs when <code>auto<\/code> is applied to just one side? The margin on that side absorbs all available space, effectively pushing the element to the opposite side, creating a look akin to floating.<\/p>\n<p><iframe height=\"257\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/ZbXGGZ\/?height=257&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/ZbXGGZ\/\">margin:auto faux float<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>\u201cauto\u201d Value and Its 0px Computation<\/h2>\n<p>As we\u2019ve touched on before, the <code>auto<\/code> value doesn\u2019t play well with floated, inline, or absolute elements. These elements already have their layout defined, so using <code>auto<\/code> for margins and expecting magical centering won\u2019t work.<\/p>\n<p>Essentially, using <code>auto<\/code> in these contexts contradicts the purpose of properties like <code>float<\/code>. Therefore, <code>auto<\/code> defaults to a value of 0px for these elements.<\/p>\n<p><code>auto<\/code> is also ineffective on a typical block element without a specified width. The examples I\u2019ve shown so far all include widths.<\/p>\n<p>If a block element\u2019s width is set to <code>auto<\/code>, it ends up with <code>0px<\/code> margins. Normally, a block element\u2019s width stretches to cover its container if set to <code>auto<\/code> or <code>100%<\/code>, leading to <code>auto<\/code> margins being computed as <code>0px<\/code>.<\/p>\n<h3>Vertical Margins and \u201cauto\u201d<\/h3>\n<p>For top and bottom margins, <code>auto<\/code> is always calculated as 0px, except for absolute elements. The <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/visudet.html#Computing_heights_and_margins\" rel=\"nofollow noopener\" target=\"_blank\">W3C specification<\/a> puts it simply:<\/p>\n<p><em>\u201cIf \u2018margin-top\u2019 or \u2018margin-bottom\u2019 is \u2018auto\u2019, their used value is 0.\u201d<\/em><\/p>\n<p>The rationale behind this is somewhat elusive. It may relate to the natural vertical flow of web pages, where centering elements vertically doesn\u2019t affect their centering on the page as a whole, unlike horizontal centering.<\/p>\n<p>This vertical centering exception is notably absent for absolute elements, which can be centered vertically across the entire page. Another unique case involves the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Box_Model\/Mastering_margin_collapsing\" rel=\"nofollow noopener\" target=\"_blank\">margin collapse effect<\/a>, where adjacent margins merge. Yet, this doesn\u2019t fully explain the rule, as elements that don\u2019t experience margin collapse \u2013 like floats and elements with <code>overflow<\/code> set to anything but <code>visible<\/code> \u2013 also default to 0px vertical margins when using <code>auto<\/code>.<\/p>\n<h2>How to Center Absolutely Positioned Elements<\/h2>\n<p>Interestingly, absolutely positioned elements allow us an exception to center them both vertically and horizontally using the <code>auto<\/code> value. However, there\u2019s a catch to making <code>margin:auto<\/code> work its magic on these elements.<\/p>\n<p>Let\u2019s dive into the guidance provided by a <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/visudet.html#abs-non-replaced-width\" rel=\"nofollow noopener\" target=\"_blank\">W3C specification<\/a>:<\/p>\n<p><em>\u201cWhen \u2018left\u2019, \u2018width\u2019, and \u2018right\u2019 are all \u2018auto\u2019, first set any \u2018auto\u2019 values for \u2018margin-left\u2019 and \u2018margin-right\u2019 to 0\u2026 If none of these are \u2018auto\u2019 and both \u2018margin-left\u2019 and \u2018margin-right\u2019 are \u2018auto\u2019, solve the equation with the constraint that the two margins are equal.\u201d<\/em><\/p>\n<p>This means, for equal <strong>horizontal <code>auto<\/code> margins<\/strong>, the values for <code>left<\/code>, <code>width<\/code>, and <code>right<\/code> must not be <code>auto<\/code>. Assigning specific values allows for perfect horizontal centering by ensuring <strong><code>left<\/code> and <code>right<\/code><\/strong> have equal values.<\/p>\n<p>Similarly, the spec <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/visudet.html#abs-non-replaced-height\" rel=\"nofollow noopener\" target=\"_blank\">notes a parallel approach for vertical centering<\/a>:<\/p>\n<p><em>\u201cIf \u2018top\u2019, \u2018height\u2019, and \u2018bottom\u2019 are all \u2018auto\u2019, set \u2018top\u2019 to the static position\u2026 If these are not \u2018auto\u2019 and both \u2018margin-top\u2019 and \u2018margin-bottom\u2019 are \u2018auto\u2019, balance the margins equally.\u201d<\/em><\/p>\n<p>To achieve <strong>vertical centering<\/strong> of an absolutely positioned element, avoid setting <code>top<\/code>, <code>height<\/code>, and <code>bottom<\/code> to <code>auto<\/code>.<\/p>\n<p>Combining these principles gives us a powerful way to center absolutely positioned elements. Here\u2019s an example to see it in action:<\/p>\n<p><iframe height=\"309\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/ZbXGQN\/?height=309&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">Check out the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/ZbXGQN\/\">margin:auto absolute<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/iframe><\/p>\n<h2>Wrapping It Up<\/h2>\n<p>Have you ever wanted to align an element to the right or left of your page, ensuring nothing wraps around it like what happens with float? Well, remember, the <code>auto<\/code> value for margins is your friend here.<\/p>\n<p>Though tempting, turning an element to absolute positioning just for vertical centering might not be the best approach. Why not explore other avenues? Flexbox and CSS transforms offer more fitting solutions for such tasks, providing cleaner and more flexible alternatives.<\/p>","protected":false},"excerpt":{"rendered":"<p>Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify this, we\u2019ll dive into the workings of margin:auto. This includes exploring its functionality for vertical centering and addressing several related nuances. But let\u2019s start at the beginning: what exactly does&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How margin:auto in CSS Works - Hongkiat<\/title>\n<meta name=\"description\" content=\"Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How margin:auto in CSS Works\" \/>\n<meta property=\"og:description\" content=\"Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-27T14:27:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T17:15:35+00:00\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How margin:auto in CSS Works\",\"datePublished\":\"2018-11-27T14:27:03+00:00\",\"dateModified\":\"2024-04-03T17:15:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/\"},\"wordCount\":781,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/\",\"name\":\"How margin:auto in CSS Works - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2018-11-27T14:27:03+00:00\",\"dateModified\":\"2024-04-03T17:15:35+00:00\",\"description\":\"Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-margin-auto\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How margin:auto in CSS Works\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How margin:auto in CSS Works - Hongkiat","description":"Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify","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:\/\/www.hongkiat.com\/blog\/css-margin-auto\/","og_locale":"en_US","og_type":"article","og_title":"How margin:auto in CSS Works","og_description":"Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify","og_url":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-11-27T14:27:03+00:00","article_modified_time":"2024-04-03T17:15:35+00:00","author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How margin:auto in CSS Works","datePublished":"2018-11-27T14:27:03+00:00","dateModified":"2024-04-03T17:15:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/"},"wordCount":781,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/","url":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/","name":"How margin:auto in CSS Works - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2018-11-27T14:27:03+00:00","dateModified":"2024-04-03T17:15:35+00:00","description":"Centering a block element horizontally with margin:auto is a common technique, but the specifics of how and why it works can be intriguing. To demystify","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How margin:auto in CSS Works"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6xI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25154"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25154\/revisions"}],"predecessor-version":[{"id":71639,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25154\/revisions\/71639"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25154"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}