{"id":74189,"date":"2020-01-17T11:41:36","date_gmt":"2020-01-17T06:11:36","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74189"},"modified":"2024-04-12T14:23:21","modified_gmt":"2024-04-12T08:53:21","slug":"height-and-width-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/","title":{"rendered":"Height and Width"},"content":{"rendered":"<div><strong>Width<\/strong> &#8211; It sets the width of an element and the width of a element is the space measured from left inside padding edge to the right inside padding edge. This property accepts different values as<\/div>\n<div><\/div>\n<ul>\n<li>length unit<\/li>\n<li>percentage<\/li>\n<li>\u2018auto\u2019 keyword<\/li>\n<\/ul>\n<div><\/div>\n<div>The default value is auto and values are assigned as<\/div>\n<div><\/div>\n<div>.top { width: 600px; }<\/div>\n<div><\/div>\n<div>Before specifying width to an element also consider the border and padding also consisting of the overall horizontal area that the element will absorb and the space between elements given by margins.<\/div>\n<div><\/div>\n<div><strong>Height<\/strong> &#8211; It sets the amount of space between the inside padding edge at top and the bottom-inside padding edge.<\/div>\n<div><\/div>\n<div>This property accepts different values which are<\/div>\n<div><\/div>\n<ul>\n<li>length unit<\/li>\n<li>percentage<\/li>\n<li>\u2018auto\u2019 keyword<br \/>\nThe default value is auto and values are assigned as<\/li>\n<\/ul>\n<div><\/div>\n<div>.top { height: 100px; }<br \/>\nIt is less commonly used<\/div>\n<div><\/div>\n<div><strong>Auto Values<\/strong> &#8211; Width and height properties are given \u2018auto\u2019 value by default or when no width or height is given then, the value is the auto keyword.<\/div>\n<div><\/div>\n<div>But applicability of the \u2018auto\u2019 keyword changes as per type of element like if applied to a block element which include &lt;div&gt; , &lt;p&gt; , &lt;h1&gt; through &lt;h6&gt; , &lt;form&gt; and &lt;ul&gt; element then, the element spans all the horizontal space available and expands vertically to accommodate the content in it.<\/div>\n<div><\/div>\n<div>But if \u2018auto\u2019 is applied on &lt;table&gt; element then it only takes space as needed based on the content as in the vertical dimension.<\/div>\n<div><\/div>\n<div><strong>Percentage Measurements<\/strong> &#8211; are used to base the size of element to that of the parent element like element with width of 25% of a parent having a width value of 600px will have a width of 150px.<\/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 &#8211; It sets the width of an element and the width of a element is the space measured from left inside padding edge to the right inside padding edge. This property accepts different values as length unit percentage \u2018auto\u2019 keyword The default value is auto and values are assigned as .top { width: 600px;&#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":[1813],"class_list":["post-74189","page","type-page","status-publish","hentry","category-css3","tag-height-and-width"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Height and Width - 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\/height-and-width-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Height and Width - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Width &#8211; It sets the width of an element and the width of a element is the space measured from left inside padding edge to the right inside padding edge. This property accepts different values as length unit percentage \u2018auto\u2019 keyword The default value is auto and values are assigned as .top { width: 600px;...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/\",\"name\":\"Height and Width - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-17T06:11:36+00:00\",\"dateModified\":\"2024-04-12T08:53:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Height and Width\"}]},{\"@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":"Height and Width - 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\/height-and-width-2\/","og_locale":"en_US","og_type":"article","og_title":"Height and Width - Tutorial","og_description":"Width &#8211; It sets the width of an element and the width of a element is the space measured from left inside padding edge to the right inside padding edge. This property accepts different values as length unit percentage \u2018auto\u2019 keyword The default value is auto and values are assigned as .top { width: 600px;...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/","name":"Height and Width - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-17T06:11:36+00:00","dateModified":"2024-04-12T08:53:21+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/height-and-width-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Height and Width"}]},{"@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\/74189","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=74189"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74189\/revisions"}],"predecessor-version":[{"id":85612,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74189\/revisions\/85612"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}