{"id":2755,"date":"2021-06-13T17:25:03","date_gmt":"2021-06-13T17:25:03","guid":{"rendered":"https:\/\/learnscripting.org\/?p=2755"},"modified":"2021-06-13T17:25:03","modified_gmt":"2021-06-13T17:25:03","slug":"css-dimension","status":"publish","type":"post","link":"https:\/\/learnscripting.org\/css-dimension\/","title":{"rendered":"CSS Dimension"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">All HTML elements in a&nbsp;<a href=\"https:\/\/codescracker.com\/css\/css-box-model.htm\">box model<\/a>&nbsp;are represented as rectangular boxes. The dimensions of the box model are calculated by using the height and width of the content area that gets applied to the element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each box is associated with a content area and many optional areas, such as\u00a0<a href=\"https:\/\/codescracker.com\/css\/css-padding.htm\">padding<\/a>,\u00a0<a href=\"https:\/\/codescracker.com\/css\/css-border.htm\">border<\/a>, and\u00a0<a href=\"https:\/\/codescracker.com\/css\/css-margin.htm\">margin<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have the following properties that allow you to control the dimensions of a box.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The\u00a0<strong>height<\/strong>\u00a0property is used to set the height of a box.<\/li><li>The\u00a0<strong>width<\/strong>\u00a0property is used to set the width of a box.<\/li><li>The\u00a0<strong>line-height<\/strong>\u00a0property is used to set the height of a line of text.<\/li><li>The\u00a0<strong>max-height<\/strong>\u00a0property is used to set a maximum height that a box can be.<\/li><li>The\u00a0<strong>min-height<\/strong>\u00a0property is used to set the minimum height that a box can be.<\/li><li>The\u00a0<strong>max-width<\/strong>\u00a0property is used to set the maximum width that a box can be.<\/li><li>The\u00a0<strong>min-width<\/strong>\u00a0property is used to set the minimum width that a box can be.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example of CSS  Height and Width:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>CSS Dimension&lt;\/title>\n    &lt;style>\n        div {\n            height: 200px;\n            width: 50%;\n            background-color: powderblue;\n        }\n    &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n    &lt;h2>Set the height and width of an element&lt;\/h2>\n\n    &lt;div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, animi.&lt;\/div>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Output:<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png\" alt=\"\" class=\"wp-image-2756\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Example of CSS Max-Width:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>CSS Dimension&lt;\/title>\n    &lt;style>\n        div {\n            height: 200px;\n            width: 500px;\n            background-color: powderblue;\n        }\n    &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n    &lt;h2>Set the max width of an element&lt;\/h2>\n\n    &lt;div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, animi.&lt;\/div>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Output:<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension1.png\" alt=\"\" class=\"wp-image-2757\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>All HTML elements in a&nbsp;box model&nbsp;are represented as rectangular boxes. The dimensions of the box model are calculated by using the height and width of the content area that gets applied to the element. Each box is associated with a content area and many optional areas, such as\u00a0padding,\u00a0border, and\u00a0margin. We have the following properties that &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"facebook_2613112545524186_272996453239123":"","twitter_aTo5NzY3MTIyNTIwMzEwNTM4MjQ7_976712252031053800":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[7],"tags":[],"class_list":["post-2755","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Dimension - Learn Scripting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learnscripting.org\/css-dimension\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Dimension - Learn Scripting\" \/>\n<meta property=\"og:description\" content=\"All HTML elements in a&nbsp;box model&nbsp;are represented as rectangular boxes. The dimensions of the box model are calculated by using the height and width of the content area that gets applied to the element. Each box is associated with a content area and many optional areas, such as\u00a0padding,\u00a0border, and\u00a0margin. We have the following properties that &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnscripting.org\/css-dimension\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn Scripting\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100064270142636\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-13T17:25:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png\" \/>\n<meta name=\"author\" content=\"master\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/\"},\"author\":{\"name\":\"master\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/person\\\/bf3c4da686af137370060664be0d6d23\"},\"headline\":\"CSS Dimension\",\"datePublished\":\"2021-06-13T17:25:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/\"},\"wordCount\":183,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/dimension.png\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/\",\"name\":\"CSS Dimension - Learn Scripting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/dimension.png\",\"datePublished\":\"2021-06-13T17:25:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#primaryimage\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/dimension.png\",\"contentUrl\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/dimension.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-dimension\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/learnscripting.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Dimension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#website\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/\",\"name\":\"Learn Scripting\",\"description\":\"Coding Knowledge Unveiled: Empower Yourself\",\"publisher\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/learnscripting.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#organization\",\"name\":\"Learn Scripting\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1\",\"width\":512,\"height\":512,\"caption\":\"Learn Scripting\"},\"image\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100064270142636\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/person\\\/bf3c4da686af137370060664be0d6d23\",\"name\":\"master\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g\",\"caption\":\"master\"},\"url\":\"https:\\\/\\\/learnscripting.org\\\/author\\\/master\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Dimension - Learn Scripting","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:\/\/learnscripting.org\/css-dimension\/","og_locale":"en_US","og_type":"article","og_title":"CSS Dimension - Learn Scripting","og_description":"All HTML elements in a&nbsp;box model&nbsp;are represented as rectangular boxes. The dimensions of the box model are calculated by using the height and width of the content area that gets applied to the element. Each box is associated with a content area and many optional areas, such as\u00a0padding,\u00a0border, and\u00a0margin. We have the following properties that &hellip;","og_url":"https:\/\/learnscripting.org\/css-dimension\/","og_site_name":"Learn Scripting","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100064270142636","article_published_time":"2021-06-13T17:25:03+00:00","og_image":[{"url":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png","type":"","width":"","height":""}],"author":"master","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnscripting.org\/css-dimension\/#article","isPartOf":{"@id":"https:\/\/learnscripting.org\/css-dimension\/"},"author":{"name":"master","@id":"https:\/\/learnscripting.org\/#\/schema\/person\/bf3c4da686af137370060664be0d6d23"},"headline":"CSS Dimension","datePublished":"2021-06-13T17:25:03+00:00","mainEntityOfPage":{"@id":"https:\/\/learnscripting.org\/css-dimension\/"},"wordCount":183,"commentCount":0,"publisher":{"@id":"https:\/\/learnscripting.org\/#organization"},"image":{"@id":"https:\/\/learnscripting.org\/css-dimension\/#primaryimage"},"thumbnailUrl":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnscripting.org\/css-dimension\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnscripting.org\/css-dimension\/","url":"https:\/\/learnscripting.org\/css-dimension\/","name":"CSS Dimension - Learn Scripting","isPartOf":{"@id":"https:\/\/learnscripting.org\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learnscripting.org\/css-dimension\/#primaryimage"},"image":{"@id":"https:\/\/learnscripting.org\/css-dimension\/#primaryimage"},"thumbnailUrl":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png","datePublished":"2021-06-13T17:25:03+00:00","breadcrumb":{"@id":"https:\/\/learnscripting.org\/css-dimension\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnscripting.org\/css-dimension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnscripting.org\/css-dimension\/#primaryimage","url":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png","contentUrl":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/dimension.png"},{"@type":"BreadcrumbList","@id":"https:\/\/learnscripting.org\/css-dimension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnscripting.org\/"},{"@type":"ListItem","position":2,"name":"CSS Dimension"}]},{"@type":"WebSite","@id":"https:\/\/learnscripting.org\/#website","url":"https:\/\/learnscripting.org\/","name":"Learn Scripting","description":"Coding Knowledge Unveiled: Empower Yourself","publisher":{"@id":"https:\/\/learnscripting.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnscripting.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/learnscripting.org\/#organization","name":"Learn Scripting","url":"https:\/\/learnscripting.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnscripting.org\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/learnscripting.org\/wp-content\/uploads\/2022\/03\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1","contentUrl":"https:\/\/i0.wp.com\/learnscripting.org\/wp-content\/uploads\/2022\/03\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1","width":512,"height":512,"caption":"Learn Scripting"},"image":{"@id":"https:\/\/learnscripting.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100064270142636"]},{"@type":"Person","@id":"https:\/\/learnscripting.org\/#\/schema\/person\/bf3c4da686af137370060664be0d6d23","name":"master","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g","caption":"master"},"url":"https:\/\/learnscripting.org\/author\/master\/"}]}},"_links":{"self":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/posts\/2755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/comments?post=2755"}],"version-history":[{"count":0,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/posts\/2755\/revisions"}],"wp:attachment":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/media?parent=2755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/categories?post=2755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/tags?post=2755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}