{"id":14919,"date":"2020-04-18T00:18:51","date_gmt":"2020-04-18T07:18:51","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14919"},"modified":"2023-12-01T02:42:34","modified_gmt":"2023-12-01T10:42:34","slug":"css-height-and-width","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/","title":{"rendered":"CSS Height and Width"},"content":{"rendered":"\n<p>When you\u2019re designing a web page, you\u2019ll likely want to specify specific sizes for the elements that appear on the web page. For instance, you may want a box to have a certain height, or a line of text to span a certain width.<br><\/p>\n\n\n\n<p>That\u2019s where the CSS height and width properties come in. The height and width properties allow you to set the height and width of an element in CSS.<br><\/p>\n\n\n\n<p>This tutorial will discuss, with examples, the basics of the CSS height and width properties and how to use the min and max height and width properties to design responsive elements. By the end of reading this tutorial, you\u2019ll be an expert at using the CSS height and width properties to set the size of an element on a web page.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Height and Width<\/h2>\n\n\n\n<p>Setting the height and width of an element on a web page allows you to define the space that element will take up on the web page. This can help you develop a structure for the elements on your web page so that each element appears correctly based on your needs.<br><\/p>\n\n\n\n<p>To define how far an element can stretch horizontally and vertically, you can use the width and height properties, respectively.<br><\/p>\n\n\n\n<p>The width and height properties allow you to set a specific width and height for the content area of a box. This means that the width and height properties control the space the contents of a box have and do not affect any margins or padding set for a box.<br><\/p>\n\n\n\n<p>The height and width properties use the following syntax:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>height: heightValue;\nwidth: widthValue;<\/pre><\/div>\n\n\n\n<p>The values heightValue and widthValue can accept any one of the following values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>auto: The browser automatically calculates the height and width.<\/li>\n\n\n\n<li>length: The width or height of a box in px, em, rem, etc.<\/li>\n\n\n\n<li>percentage: The width or height of a box as a percentage of the size of the block in which an element appears.<\/li>\n\n\n\n<li>initial: The default value specified for the box.<\/li>\n\n\n\n<li>inherit: The same value as the width or height for the box in which an element appears.<\/li>\n<\/ul>\n\n\n\n<p>Now that we know the basics of the height and width properties, we can explore an example of each of these properties in action.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS height and width Properties<\/h2>\n\n\n\n<p>Suppose we are designing a website for a local cafe called The Pickled Apple. This cafe has asked us to create a box on the \u201cAbout\u201d page of their website, which should store a brief description of the cafe.<br><\/p>\n\n\n\n<p>This box should be 200px wide and 200px tall and have a light gray background. These dimensions have been chosen to ensure that the other elements we want to add to the web page will fit when we implement them.<br><\/p>\n\n\n\n<p>We could use the following code to create the box:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;p class=\"aboutBox\"&gt;The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.&lt;\/p&gt;\n&lt;style&gt;\n.aboutBox {\n\theight: 200px;\n\twidth: 200px;\n\tbackground-color: lightgray;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>Let\u2019s break down our code. In our HTML file, we have created a paragraph of text using a &lt;p&gt; tag. This &lt;p&gt; tag has the class name <code>aboutBox<\/code>, which we use in our CSS file to style the paragraph of text.<br><\/p>\n\n\n\n<p>In our CSS file, we have defined a style rule that applies to any element with the class name <code>aboutBox<\/code>. This style rule sets the height of an element to 200px, the width of an element to 200px, and sets the background color of an element to light gray.<\/p>\n\n\n\n<p>If we wanted our element to be 100px wide, we could change the width property to be equal to 100px. Or if we wanted our element to be 300px tall, we could change the height property to be equal to 300px.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS min and max Length Properties<\/h2>\n\n\n\n<p>Width and height are fixed values. This means that the width and height you specify will remain the same and will not change if you resize the window or view the web page on a different device (unless you use a relative height value, such as a percentage of the size of the parent element).<br><\/p>\n\n\n\n<p>This is important to understand because if you want to design an accessible experience, it may not be practical to set specific heights and widths for elements. For instance, if you specify the width of an image to be 500px, that may cause the image to render incorrectly if a user views the site on a mobile device, whose screen size may be smaller.<br><\/p>\n\n\n\n<p>That\u2019s where the min and max length values come in.<br><\/p>\n\n\n\n<p>To make an element adapt to different screen and viewport sizes, you can use the min-width, max-width, min-height, and max-height properties. When you specify these properties, the values specified for width and height will be overridden.<br><\/p>\n\n\n\n<p>The min-height property defines the minimum height of a property. If min-height is specified, an element\u2019s height can never be lower than the value of min-height. The min-width property defines the minimum width of a property and works in the same way.<br><\/p>\n\n\n\n<p>Similarly, if you want to define the maximum height or width of a property, you can use max-height and max-width, respectively.<br><\/p>\n\n\n\n<p>Let\u2019s return to our cafe example from earlier. Suppose we want the width of our box to change depending on the size of the user\u2019s screen. The maximum width of the box should be 500px, and our box should never be narrower than 100px. We could accomplish this goal using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;p class=\"aboutBox\"&gt;The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.&lt;\/p&gt;\n&lt;style&gt;\n.aboutBox {\n\tmax-width: 500px;\n\tmin-width: 100px;\n\tbackground-color: lightgray;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>Let\u2019s break down our code and discuss how it works. In our HTML file, we have specified a paragraph of text between &lt;p&gt; tags which contains the same text as our first example. The class name associated with this paragraph of text is <code>aboutBox<\/code>.<br><\/p>\n\n\n\n<p>In our CSS file, we have specified three properties associated with the <code>aboutBox<\/code> class.<\/p>\n\n\n\n<p>The max-width property is set to 500px, which means the maximum width of the box is 500px. The min-width property is set to 100px, which means the box will never appear narrower than 100px, no matter what device a user is viewing the site on. The background-color property is set to lightgray, which sets the background color of our box to light gray.<br><\/p>\n\n\n\n<p>The size of this box will change depending on the size of the browser. So, if you make the browser window smaller, the size of the box will change accordingly. However, no matter how large the browser window appears, the width of the &lt;p&gt; tag will never exceed 500px.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS height and width properties allow you to define the height and width of an element on a web page.<br><\/p>\n\n\n\n<p>However, these properties set a fixed value for the height and width of an element. If you want the size of a box to change depending on the size of the browser window, you can use the min-height, min-width, max-height and max-width properties.&nbsp;<br><\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, the basics of height and width in CSS, how to use the height and width properties, and how to use the corresponding max and min height and width properties to set the size of an element on a web page. Now you\u2019re ready to start using the height and width properties like an expert!<br><\/p>\n","protected":false},"excerpt":{"rendered":"When you\u2019re designing a web page, you\u2019ll likely want to specify specific sizes for the elements that appear on the web page. For instance, you may want a box to have a certain height, or a line of text to span a certain width. That\u2019s where the CSS height and width properties come in. The&hellip;","protected":false},"author":240,"featured_media":20302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14919","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":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Height and Width: The Complete Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS height and width properties allow developers to set the size of a web element. On Career Karma, learn how to use the height and width properties.\" \/>\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-height-and-width\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Height and Width\" \/>\n<meta property=\"og:description\" content=\"The CSS height and width properties allow developers to set the size of a web element. On Career Karma, learn how to use the height and width properties.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-height-and-width\/\" \/>\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-18T07:18:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:42:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Height and Width\",\"datePublished\":\"2020-04-18T07:18:51+00:00\",\"dateModified\":\"2023-12-01T10:42:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/\"},\"wordCount\":1237,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/\",\"name\":\"CSS Height and Width: The Complete Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"datePublished\":\"2020-04-18T07:18:51+00:00\",\"dateModified\":\"2023-12-01T10:42:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS height and width properties allow developers to set the size of a web element. On Career Karma, learn how to use the height and width properties.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-height-and-width\\\/#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 Height and Width\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; 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\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"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 Height and Width: The Complete Guide | Career Karma","description":"The CSS height and width properties allow developers to set the size of a web element. On Career Karma, learn how to use the height and width properties.","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-height-and-width\/","og_locale":"en_US","og_type":"article","og_title":"CSS Height and Width","og_description":"The CSS height and width properties allow developers to set the size of a web element. On Career Karma, learn how to use the height and width properties.","og_url":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-18T07:18:51+00:00","article_modified_time":"2023-12-01T10:42:34+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Height and Width","datePublished":"2020-04-18T07:18:51+00:00","dateModified":"2023-12-01T10:42:34+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/"},"wordCount":1237,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-height-and-width\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/","url":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/","name":"CSS Height and Width: The Complete Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","datePublished":"2020-04-18T07:18:51+00:00","dateModified":"2023-12-01T10:42:34+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS height and width properties allow developers to set the size of a web element. On Career Karma, learn how to use the height and width properties.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-height-and-width\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-height-and-width\/#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 Height and Width"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; 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\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","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\/14919","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=14919"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14919\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20302"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}