Difference between revisions of "User:RainSlide/CSS Boxes"
(Adjust styles) |
(Add display: table-others) |
||
| Line 100: | Line 100: | ||
</div> | </div> | ||
Other table display values works like table rows, or won't even display its contents. | === <code>display: table-<em>others</em></code> === | ||
Other table display values works just like table rows, (<code>table-row-group</code>, <code>table-header-group</code> and <code>table-footer-group</code>), or won't even display its contents (<code>table-column</code> and <code>table-column-group</code>). | |||
== A new block formatting context == | == A new block formatting context == | ||
Revision as of 05:16, 27 September 2021
This page is mainly for showing why Template:Hint, Template:Note and Template:Warning uses display: table to archive compatibility for both adaptive width and floating sibling(s).
If a set of style is not compatible with adaptive width, it span to its full width even when it don't need to.
If a set of style is not compatible with floating sibling(s), the element may still work well with some short content in it; in another word, it may still looks fine when its content width + margin + padding + border is lower than the "remaining width" lefted by the floating sibling(s). So we have to use Lorem ipsum (as well as a floating box, for sure) to test it.
Ideally, you may just set the widths to fixed values, and pretend nothing happens and CSS is awesome. However, the content container of MediaWiki got adaptive width, and maybe you are maintaining a MediaWiki Template, with only inline styles.
is
Awesome
Table
display: table
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
| This is a wikitable |
|---|
No padding when it's in another table, however.
|
display: table-cell
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
Table cells are not blocky! Without this sentence, they are in the same row by now.
Table cells have no margin.
display: table-caption
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
There can only be one table caption per table, or, per anything.
display: table-row
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
Table rows have no margin, padding or border.
display: table-others
Other table display values works just like table rows, (table-row-group, table-header-group and table-footer-group), or won't even display its contents (table-column and table-column-group).
A new block formatting context
See guide Block formatting context on MDN.
float: left
Will everything go right with float set to left?
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No, something falls down.
display: inline-block
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
display: flow-root
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is the end of part one. Part two will feature contain: content, width: max-content, box-sizing: border-box; max-width: 100%, display: flex, display: grid, and more, if I ever got time to work on the part two.