{"id":74191,"date":"2020-01-17T11:41:38","date_gmt":"2020-01-17T06:11:38","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74191"},"modified":"2024-04-12T14:23:21","modified_gmt":"2024-04-12T08:53:21","slug":"min-and-max-dimensions-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/","title":{"rendered":"Min and Max Dimensions"},"content":{"rendered":"<div>Width and height can be assigned a maximum and minimum values so as to accommodate all content within the area which an element occupies and limit the size of area the element can take and stopping\u00a0 expansion and contraction of the element. They consist of following properties<\/div>\n<div><\/div>\n<ul>\n<li>min-width<\/li>\n<li>max-width<\/li>\n<li>min-height<\/li>\n<li>max-height<\/li>\n<\/ul>\n<p>They are also used in a variable width design to not only adapt to different screen resolutions but also define the maximum area to occupy and prevent stretching or contracting.<\/p>\n<div><\/div>\n<div><strong>min-width and min-height<\/strong> \u2013 Both of the properties define the minimum size an element will occupy or an lower-size constraint on the element. Both have an default value of 0. IE 6 do not support both of the properties. It takes following values<\/div>\n<div><\/div>\n<ul>\n<li>length units<\/li>\n<li>percentage<\/li>\n<\/ul>\n<div><\/div>\n<div>They are given to prohibit shrinking of an element to fit the user\u2019s window or its content. They are used as<\/div>\n<div><\/div>\n<div>.top { min-width: 500px; min-height: 100px; }<\/div>\n<div><\/div>\n<div>If the browser window or parent element becomes narrower than minimum values given, the element do not contract but a scroll bar appears and if the content in the element is less than the minimum height, the element will expand to the min-height value.<\/div>\n<div><\/div>\n<div>In IE 6 due to no support, both of these act like the width and height hence, conditional comments can be used for IE 6.<\/div>\n<div><\/div>\n<div><strong>max-width and max-height<\/strong> \u2013 It is opposite of the min-width property and the max-width and max-height properties set an upper limit for width and height of element. Both have an default value of \u2018none\u2019. IE 6 do not support both of the properties. It takes following values<\/div>\n<div><\/div>\n<ul>\n<li>length units<\/li>\n<li>percentage<\/li>\n<li>none<\/li>\n<\/ul>\n<div><\/div>\n<div>They specify a maximum length if the area available to element becomes larger. They are used as<\/div>\n<div><\/div>\n<div>.top { max-height: 200px;\u00a0 max-width: 120px; }<\/div>\n<div><\/div>\n<div>If content of \u2018top\u2019 class element is wider than 150px it will wrap or overflow its parent element but if parent element becomes taller than 200 pixels, the \u2018top\u2019 class element will remain at 200 pixels remaining content will overflow.<\/div>\n<div>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Width and height can be assigned a maximum and minimum values so as to accommodate all content within the area which an element occupies and limit the size of area the element can take and stopping\u00a0 expansion and contraction of the element. They consist of following properties min-width max-width min-height max-height They are also used&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1815],"class_list":["post-74191","page","type-page","status-publish","hentry","category-css3","tag-min-and-max-dimensions"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Min and Max Dimensions - Tutorial<\/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:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Min and Max Dimensions - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Width and height can be assigned a maximum and minimum values so as to accommodate all content within the area which an element occupies and limit the size of area the element can take and stopping\u00a0 expansion and contraction of the element. They consist of following properties min-width max-width min-height max-height They are also used...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:21+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/\",\"name\":\"Min and Max Dimensions - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-17T06:11:38+00:00\",\"dateModified\":\"2024-04-12T08:53:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Min and Max Dimensions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Min and Max Dimensions - Tutorial","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.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/","og_locale":"en_US","og_type":"article","og_title":"Min and Max Dimensions - Tutorial","og_description":"Width and height can be assigned a maximum and minimum values so as to accommodate all content within the area which an element occupies and limit the size of area the element can take and stopping\u00a0 expansion and contraction of the element. They consist of following properties min-width max-width min-height max-height They are also used...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:21+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/","name":"Min and Max Dimensions - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-17T06:11:38+00:00","dateModified":"2024-04-12T08:53:21+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/min-and-max-dimensions-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Min and Max Dimensions"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74191"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74191\/revisions"}],"predecessor-version":[{"id":85676,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74191\/revisions\/85676"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}