{"id":158,"date":"2010-10-10T05:10:22","date_gmt":"2010-10-10T13:10:22","guid":{"rendered":"https:\/\/www.bhavyatechnologies.com\/blog\/?p=158"},"modified":"2010-10-10T05:11:05","modified_gmt":"2010-10-10T13:11:05","slug":"css-advanced-tutorialthe-display-property","status":"publish","type":"post","link":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/","title":{"rendered":"CSS Advanced Tutorial:The Display Property"},"content":{"rendered":"<div id=\"antiintro\">\n<div id=\"ai2\">\n<p>A key trick to the manipulation of <abbr title=\"HyperText Markup Language\">HTML<\/abbr> elements is understanding that there&#8217;s nothing at all special about how  most of them work. Most pages could be made up from just a few tags  that can be styled any which way you choose. The browser&#8217;s default  visual representation of most HTML elements consist of varying font  styles, margins, padding and, essentially, display types.<\/p>\n<p>The most fundamental types of display are <strong>inline<\/strong>, <strong>block-line<\/strong> and <strong>none<\/strong> and they can be manipulated with the <a href=\"http:\/\/htmldog.com\/reference\/cssproperties\/display\/\"><code>display<\/code><\/a> property and the values <code>inline<\/code>, <code>block<\/code> and <code>none<\/code>.<\/p>\n<p><code>inline<\/code> does just what it says &#8211; elements that are displayed inline follow the flow of a line. <strong>Strong<\/strong>, <strong>anchor<\/strong> and <strong>emphasis<\/strong> elements are traditionally displayed inline.<\/p>\n<p><code>block<\/code> puts a line break before and after the element. <strong>Header<\/strong> and <strong>paragraph<\/strong> elements are examples of elements that are traditionally displayed block-line.<\/p>\n<p><code>none<\/code>, well, doesn&#8217;t display the element, which may sound  pretty useless but can be used to good effect with accessibility  considerations (see <a href=\"http:\/\/htmldog.com\/guides\/htmladvanced\/links\/\">Accessible Links<\/a>), alternate stylesheets or advanced hover effects.<\/p>\n<p>The original default style-sheet for this site for example,  manipulates a few traditionally in-line and block-line elements to fit  the design.<\/p>\n<pre><code>\r\nh1 {\r\n\t<strong>display: inline;<\/strong>\r\n\tfont-size: 2em;\r\n}\r\n\r\n#header p {\r\n\t<strong>display: inline;<\/strong>\r\n\tfont-size: 0.9em;\r\n\tpadding-left: 2em;\r\n}\r\n<\/code><\/pre>\n<p>This enabled the title &#8216;htmldog.com&#8217; and the tag-line to be displayed  next to each other rather than above and below each other while  maintaining optimum accessibility.<\/p>\n<pre><code>\r\n#navigation, #seeAlso, #comments, #standards {\r\n\t<strong>display: none;<\/strong>\r\n}\r\n<\/code><\/pre>\n<p>The above code is used in the print-only styles to basically  &#8216;turn-off&#8217; those elements, such as navigation, which are insignificant  to the single page.<\/p>\n<div>\n<p><code>display: none<\/code> and <code>visibility: hidden<\/code> vary in that <code>display: none<\/code> takes the element completely out of play, where as <code>visibility: hidden<\/code> keeps the element and its flow in place without visually representing  its contents. For example, if the second paragraph of 3 were set to <code>display: none<\/code>, the first paragraph would run straight in to the third whereas if it were set to <code>visibility: hidden<\/code>, there would be a gap where the paragraph should be.<\/p>\n<\/div>\n<h2>Tables<\/h2>\n<p>Perhaps the best way to understand the table-related display property values is to think of HTML tables. <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/table\/\"><code>table<\/code><\/a> is the initial display and you can mimic the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/tr\/\"><code>tr<\/code><\/a> and <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/td\/\"><code>td<\/code><\/a> elements with the <code>table-row<\/code> and <code>table-cell<\/code> values respectively.<\/p>\n<p>The <a href=\"http:\/\/htmldog.com\/reference\/cssproperties\/display\/\"><code>display<\/code><\/a> property goes further by offering <code>table-column<\/code>, <code>table-row-group<\/code>, <code>table-column-group<\/code>, <code>table-header-group<\/code>, <code>table-footer-group<\/code> and <code>table-caption<\/code> as values, which are all quite self-descriptive. The immediately  obvious benefit of these values is that you can construct a table by  columns, rather than the row-biased method used in HTML.<\/p>\n<p>Finally, the value <code>inline-table<\/code> basically sets the table without line breaks before and after it.<\/p>\n<div>\n<p>Getting carried away with <acronym title=\"Cascading Style Sheets\">CSS<\/acronym> tables can seriously damage your accessibility. HTML should be used to  convey meaning, so if you have tabular data it should be arranged in  HTML tables. Using CSS tables exclusively could result in a mash of data  that is completely unreadable without the CSS. Bad. And not in a  Michael Jackson way.<\/p>\n<\/div>\n<h2>Other display types<\/h2>\n<p><code>list-item<\/code> is self descriptive and displays as in the way that you would usually expect an <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/li\/\"><code>li<\/code><\/a> HTML element to. To work properly then, elements displayed this way should be nested in a <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/ul\/\"><code>ul<\/code><\/a> or <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/ol\/\"><code>ol<\/code><\/a> element.<\/p>\n<p><code>run-in<\/code> makes an element either in-line or block-line depending on the display of its parent. It doesn&#8217;t work on <abbr>IE<\/abbr> or Mozilla based browsers. Very helpful.<\/p>\n<p><code>compact<\/code> also makes the element inline or block-line depending on the context. It doesn&#8217;t work that well either&#8230;<\/p>\n<p><code>marker<\/code> is used exclusively with the <code>:before<\/code> and <code>:after<\/code> <a href=\"http:\/\/htmldog.com\/guides\/cssadvanced\/pseudoelements\/\">pseudo elements<\/a> to define the display of the value of the <a href=\"http:\/\/htmldog.com\/reference\/cssproperties\/content\/\"><code>content<\/code><\/a> property. The automatic display of the <a href=\"http:\/\/htmldog.com\/reference\/cssproperties\/content\/\"><code>content<\/code><\/a> property is already <code>marker<\/code>, so this is only useful if you are overriding a previous <a href=\"http:\/\/htmldog.com\/reference\/cssproperties\/display\/\"><code>display<\/code><\/a> property for the pseudo element.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A key trick to the manipulation of HTML elements is understanding that there&#8217;s nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser&#8217;s default visual representation of most HTML elements consist of varying &hellip; <a href=\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS Advanced Tutorial:The Display Property<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-158","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Advanced Tutorial:The Display Property - Bhavya Technologies - Blog<\/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.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Advanced Tutorial:The Display Property - Bhavya Technologies - Blog\" \/>\n<meta property=\"og:description\" content=\"A key trick to the manipulation of HTML elements is understanding that there&#8217;s nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser&#8217;s default visual representation of most HTML elements consist of varying &hellip; Continue reading CSS Advanced Tutorial:The Display Property\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\" \/>\n<meta property=\"og:site_name\" content=\"Bhavya Technologies - Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BhavyaWebTech\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-10-10T13:10:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-10-10T13:11:05+00:00\" \/>\n<meta name=\"author\" content=\"Bhavya Technologies\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:site\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhavya Technologies\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\"},\"author\":{\"name\":\"Bhavya Technologies\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\"},\"headline\":\"CSS Advanced Tutorial:The Display Property\",\"datePublished\":\"2010-10-10T13:10:22+00:00\",\"dateModified\":\"2010-10-10T13:11:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\"},\"wordCount\":571,\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"articleSection\":[\"CSS Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\",\"name\":\"CSS Advanced Tutorial:The Display Property - Bhavya Technologies - Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\"},\"datePublished\":\"2010-10-10T13:10:22+00:00\",\"dateModified\":\"2010-10-10T13:11:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Advanced Tutorial:The Display Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"name\":\"Bhavya Technologies - Blog\",\"description\":\"\u00a0Digital Marketing, Website design &amp; development company in Hyderabad, India\",\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\",\"name\":\"Bhavya Web Technologies\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"contentUrl\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"width\":248,\"height\":100,\"caption\":\"Bhavya Web Technologies\"},\"image\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BhavyaWebTech\/\",\"https:\/\/x.com\/bhavyatech\",\"http:\/\/www.linkedin.com\/company\/bhavya-technologies\/\",\"http:\/\/www.youtube.com\/user\/bhavyatechnologies\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\",\"name\":\"Bhavya Technologies\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"caption\":\"Bhavya Technologies\"},\"description\":\"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.\",\"sameAs\":[\"http:\/\/www.bhavyatechnologies.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Advanced Tutorial:The Display Property - Bhavya Technologies - Blog","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.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/","og_locale":"en_US","og_type":"article","og_title":"CSS Advanced Tutorial:The Display Property - Bhavya Technologies - Blog","og_description":"A key trick to the manipulation of HTML elements is understanding that there&#8217;s nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser&#8217;s default visual representation of most HTML elements consist of varying &hellip; Continue reading CSS Advanced Tutorial:The Display Property","og_url":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/","og_site_name":"Bhavya Technologies - Blog","article_publisher":"https:\/\/www.facebook.com\/BhavyaWebTech\/","article_published_time":"2010-10-10T13:10:22+00:00","article_modified_time":"2010-10-10T13:11:05+00:00","author":"Bhavya Technologies","twitter_card":"summary_large_image","twitter_creator":"@bhavyatech","twitter_site":"@bhavyatech","twitter_misc":{"Written by":"Bhavya Technologies","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/#article","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/"},"author":{"name":"Bhavya Technologies","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895"},"headline":"CSS Advanced Tutorial:The Display Property","datePublished":"2010-10-10T13:10:22+00:00","dateModified":"2010-10-10T13:11:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/"},"wordCount":571,"publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"articleSection":["CSS Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/","name":"CSS Advanced Tutorial:The Display Property - Bhavya Technologies - Blog","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website"},"datePublished":"2010-10-10T13:10:22+00:00","dateModified":"2010-10-10T13:11:05+00:00","breadcrumb":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-advanced-tutorialthe-display-property\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bhavyatechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Advanced Tutorial:The Display Property"}]},{"@type":"WebSite","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","name":"Bhavya Technologies - Blog","description":"\u00a0Digital Marketing, Website design &amp; development company in Hyderabad, India","publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization","name":"Bhavya Web Technologies","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","contentUrl":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","width":248,"height":100,"caption":"Bhavya Web Technologies"},"image":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BhavyaWebTech\/","https:\/\/x.com\/bhavyatech","http:\/\/www.linkedin.com\/company\/bhavya-technologies\/","http:\/\/www.youtube.com\/user\/bhavyatechnologies"]},{"@type":"Person","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895","name":"Bhavya Technologies","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","caption":"Bhavya Technologies"},"description":"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.","sameAs":["http:\/\/www.bhavyatechnologies.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=158"}],"version-history":[{"count":2,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/158\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/158\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}