User:RainSlide/CSS Boxes - Revision history

RainSlide: web dev tools

2022-01-21T07:02:49Z

web dev tools

← Older revision		Revision as of 07:02, 21 January 2022
Line 16:		Line 16:
	and maybe you are maintaining a MediaWiki [[Template:Template\|Template]],		and maybe you are maintaining a MediaWiki [[Template:Template\|Template]],
	with only inline styles.		with only inline styles.

			'''You may want to view this page with Web developer tools opened.'''

	<div style="position: fixed; top: 12.5vh; font-size: 25vh; line-height: 1; font-weight: bold; white-space: pre; color: lightblue; opacity: .1; user-select: none; pointer-events: none;">CSS<br>is<br>Awesome</div>		<div style="position: fixed; top: 12.5vh; font-size: 25vh; line-height: 1; font-weight: bold; white-space: pre; color: lightblue; opacity: .1; user-select: none; pointer-events: none;">CSS<br>is<br>Awesome</div>

RainSlide: /* The border-collapse & padding problem */

2022-01-21T07:01:33Z

The border-collapse & padding problem

← Older revision		Revision as of 07:01, 21 January 2022
Line 55:		Line 55:
	\|-		\|-
	\| <div style="display: table; background-color: #FEE; border-collapse: separate;		\| <div style="display: table; background-color: #FEE; border-collapse: separate;
	margin: .5em 0; padding: .5em 1em; border: 1px solid;">The padding is back!</div>		margin: .5em 0; padding: .5em 1em; border: 1px solid;">The padding is back with <code>border-collapse: separate</code>!</div>
	\|}		\|}

	<~~div~~ style="~~display~~: ~~table~~; background-color: #~~FEE~~; border-collapse: separate;		<table style="border-collapse: collapse; margin: .5em 0; padding: .5em 1em; border: 1px solid; background-color: #EFE;">
	margin: .5em 0; padding: .5em 1em; border: 1px solid;">		<tr>
	<~~div~~ style="~~display: table-cell;~~ padding: .25em .5em; border: 1px solid;>But...</~~div~~>		<th colspan="2" style="padding: .25em .5em; border: 1px solid;">Here inside a <code>border-collapse: collapse</code> table...</th>
	<~~div~~ style="~~display~~: ~~table-cell~~; padding: .25em .5em; border: 1px solid;>Maybe that's not what we want.</~~div~~>		</tr>
	</~~div~~>		<tr>
			<td style="padding: .25em .5em; border: 1px solid;">Every thing is fine.</td>
			<td style="padding: .25em .5em; border: 1px solid;">Just fine</td>
			</tr>
			</table>

			<table style="border-collapse: separate; margin: .5em 0; padding: .5em 1em; border: 1px solid; background-color: #FEE;">
			<tr>
			<th colspan="2" style="padding: .25em .5em; border: 1px solid;">But, here inside a <code>border-collapse: separate</code> table...</th>
			</tr>
			<tr>
			<td style="padding: .25em .5em; border: 1px solid;">The separated border...</td>
			<td style="padding: .25em .5em; border: 1px solid;">Maybe that's not what we want.</td>
			</tr>
			</table>

	For those who are interested,		For those who are interested,

RainSlide: /* The border-collapse & padding problem */ lower title level

2022-01-21T06:46:01Z

The border-collapse & padding problem: lower title level

← Older revision		Revision as of 06:46, 21 January 2022
Line 36:		Line 36:

	</div>		</div>
	=== The border-collapse & padding problem ===		==== The border-collapse & padding problem ====

	{\| class="wikitable"		{\| class="wikitable"

RainSlide: /* The border-collapse & padding problem */ add a CSS table

2021-09-27T15:16:22Z

The border-collapse & padding problem: add a CSS table

← Older revision		Revision as of 15:16, 27 September 2021
Line 57:		Line 57:
	margin: .5em 0; padding: .5em 1em; border: 1px solid;">The padding is back!</div>		margin: .5em 0; padding: .5em 1em; border: 1px solid;">The padding is back!</div>
	\|}		\|}

			<div style="display: table; background-color: #FEE; border-collapse: separate;
			margin: .5em 0; padding: .5em 1em; border: 1px solid;">
			<div style="display: table-cell; padding: .25em .5em; border: 1px solid;>But...</div>
			<div style="display: table-cell; padding: .25em .5em; border: 1px solid;>Maybe that's not what we want.</div>
			</div>

	For those who are interested,		For those who are interested,

RainSlide: /* display: table */ border-collapse: separate

2021-09-27T13:57:11Z

display: table: border-collapse: separate

@@ Line 36: / Line 36: @@
 </div>
 {| class="wikitable"
@@ Line 41: / Line 42: @@
 |-
 | <div style="display: table; background-color: #FEE;
-margin: .5em 0; padding: .5em 1em; border: 1px solid;">No padding when it's in another table, however.</div>
+margin: .5em 0; padding: .5em 1em; border: 1px solid;">No padding when it's in a wikitable.</div>
 |}
 === <code>display: table-cell</code> ===

RainSlide: /* display: flow-root */

2021-09-27T13:14:14Z

display: flow-root

← Older revision		Revision as of 13:14, 27 September 2021
Line 148:		Line 148:

	== <code>display: flow-root</code> ==		== <code>display: flow-root</code> ==

			<div style="overflow: auto;">

	<div style="float: right; margin: .5em 0 .5em .5em; padding: .5em 1em; border: 1px solid; background-color: ">		<div style="float: right; margin: .5em 0 .5em .5em; padding: .5em 1em; border: 1px solid; background-color: ">
Line 161:		Line 163:
	</div>		</div>

	This is the end of part one. Part two will feature <code>contain: content</code>, <code>width: max-content</code>, <code>box-sizing: border-box; max-width: 100%</code>, <code>display: flex</code>, <code>display: grid</code>, and more, if I ever got time to work on the part two.		== And… ==

			This is the end of part one. Part two will feature <code>contain: content</code>, <code>width: fit-content</code>, <code>width: max-content</code>, <code>box-sizing: border-box; max-width: 100%</code>, <code>display: flex</code>, <code>display: grid</code>, and more, if I ever got time to work on the part two.

RainSlide: Add display: table-others

2021-09-27T05:16:30Z

Add display: table-others

← Older revision		Revision as of 05:16, 27 September 2021
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 ==

RainSlide: Adjust styles

2021-09-27T05:11:52Z

Adjust styles

Show changes

RainSlide: /* float: left */ modify desc

2021-09-27T04:28:38Z

float: left: modify desc

← Older revision		Revision as of 04:28, 27 September 2021
Line 113:		Line 113:
	=== <code>float: left</code> ===		=== <code>float: left</code> ===

	''Will everything go right?''		''Will everything go right with float set to left?''

	<div style="overflow: auto;">		<div style="overflow: auto;">

RainSlide: Add more desc

2021-09-22T11:44:05Z

Add more desc

← Older revision		Revision as of 11:44, 22 September 2021
Line 1:		Line 1:
	If a set of style is not ~~compactable~~ with adaptive width,		This page is mainly for showing why [[Template:Hint]], [[Template:Note]] and [[Template:Warning]] uses <code>display: table</code> 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.		it span to its full width even when it don't need to.

	If a set of style is not ~~compactable~~ with floating sibling(s),		If a set of style is not compatible with floating sibling(s),
	the element may still work well with some short content in it;		the element may still work well with some short content in it;
	in another word, it may still looks fine when its		in another word, it may still looks fine when its
Line 14:		Line 16:
	and maybe you are maintaining a MediaWiki [[Template:Template\|Template]],		and maybe you are maintaining a MediaWiki [[Template:Template\|Template]],
	with only inline styles.		with only inline styles.

			<div style="position: fixed; top: 12.5vh; font-size: 25vh; line-height: 1; font-weight: bold; white-space: pre; color: lightblue; opacity: .1; user-select: none; pointer-events: none;">CSS<br>is<br>Awesome</div>

	== Table ==		== Table ==