Menu
Is there a difference between display:block; and display:table;? It looks to me like the display type of the dom-node containing table-row and table-cell nodes doesn't matter. MDN says that display:table; makes it behave like a table, but doesn't elaborate on what that behavior is. What is that behavior?
Similarly, is there a difference between display:inline-block; and display:inline-table;?
231
Setting display to table makes the element behave like a table. So you can make a replica of an HTML table without using the table element and corresponding elements such as tr and td . For example, in HTML, you can make a table with the <table> element and also a <div> , or any container of your choice.
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there display:block display property of an element only changes how the element is displayed, NOT what kind of element it is.
Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
Comparing the two (block and table), I don't know of any core differences (there may be minor ones) you would see within a vacuum. I believe the major differences are specifically to children. Tables and their children have very different attributes/relationships than a div and its children.
As far as inline-block and inline-table see: What is the difference between inline-block and inline-table?
This article (http://css-tricks.com/almanac/properties/d/display/) has some interesting information, specifically regarding all the different display properties related to a table.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
