06-basic-visual-formatting/inline-axis-properties.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The seven properties of inline-axis formatting, and which can be set to auto</title>
<style type="text/css">
body {
	display: flex;
	justify-content: space-between;
	width: 90em;
	height: 40em;
	font: italic 1em Calibri, Helvetica, sans-serif;
	padding: 1em;
}
main {width: 40em;}

.top, .bottom, .height {opacity: 0;}

/* --------------------------------- */

div {
	position: relative;
	padding: 4em 4em;
	border: 2px solid;
	mix-blend-mode: darken;
	box-sizing: border-box;
}
div > span {
	position: absolute;
	justify-content: center;
	font-size: 1.75em;
	line-height: 1;
	text-align: center;
}
div > span:is(.top, .bottom) {
	width: 100%;
	left: 0;
}
div > span.top {
	top: 0.25em;
}
div > span.bottom {
	bottom: 0.25em;
}
div > span b {
	display: inline-block;
	padding: 0.25em;
	padding-right: 0.33em;
}

div > :is(span.left, span.right) {
	writing-mode: sideways-lr;
	left: 0; right: auto; top: 0; bottom: 0;
}
div > span.right {
	writing-mode: sideways-rl;
	left: auto; right: 0;
}
.vert div > span.right {
	writing-mode: sideways-lr;
}

/* --------------------------------- */

div.edge {
	border: none;
	padding: 0;
}

div.outer::before, div.outer::after,
div.margin::before, div.margin::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 12em;
	height: 0;
	border-block-start: 2px dashed;
}
div.outer::before {
	bottom: 0; left: 0;
	transform: rotate(-45deg);
	transform-origin: 0 0;
}
div.outer::after {
	bottom: 0; right: 0;
	transform: rotate(45deg);
	transform-origin: 100% 0;
}

/* --------------------------------- */

div.margin {
	overflow: visible;
}
div.margin > span.top {
	top: 0.4em;
}

div.margin > span.left {
	left: 0.25em;
}
div.margin > span.right {
	right: 0.25em;
}
div.margin::before {
	top: -1px; left: 0;
	transform: rotate(45deg);
	transform-origin: 0 0;
}
div.margin::after {
	top: -1px; right: 0;
	transform: rotate(-45deg);
	transform-origin: 100% 0;
}


/* --------------------------------- */

div.border {
	padding: 0;
	border-width: 0.5em;
}
div.border > span.top {
	top: -0.9em;
}
div.border > span.bottom {
	bottom: -0.9em;
}
div.border > span.left {
	left: -1em;
}
div.border > span.right {
	right: -1em;
}
.vert div.border > span.right {
	right: -0.875em;
}
div.border > span b {
	display: inline-block;
	padding: 0.25em;
	padding-inline: 0.5em;
	background-color: rgba(255,255,255,0.9);
}

/* --------------------------------- */

div.padding {
	border-width: 0;
	background-color: #EEE;
	z-index: 3;
}
div.padding span.bottom {
	bottom: 0.33em;
}
div.padding span.left {
	left: 0.33em;
}
div.padding span.right {
	right: 0.33em;
}

/* --------------------------------- */

div.content {
	height: 16em;
	padding: 0;
	background-color: #DDD;
	position: relative;
}

div.content > span {
	display: block;
	padding-block: 0.75em;
	padding-inline: 2em 0;
	padding-right: 2em;
	width: auto;
}
div.content > span b {
	background-color: #DDD;
	display: inline-block;
	line-height: 0.9;
	text-align: center;
}
div.content span.width {
	z-index: 1;
	left: 0; right: 0; top: 50%; margin-block-start: -1.67em;
	background:
		url(i/arrowhead-right.svg) 100% 50% / 1.25em 0.75em no-repeat,
		url(i/arrowhead-left.svg) 0% 50% / 1.25em 0.75em no-repeat,
		linear-gradient(90deg,black,black) 50% 50% / calc(100% - 2em) 0.25rem no-repeat
		;
	font-style: italic;
}
div.content span.height {
	z-index: 2;
	display: flex;
	align-items: center;
	text-align: middle;
	top: 0; bottom: 0; left: 50%; margin-left: -5.75em;
	background:
		url(i/arrowhead-up.svg) 50% 0% / 0.75em 1.25em no-repeat,
		url(i/arrowhead-down.svg) 50% 100% / 0.75em 1.25em no-repeat,
		linear-gradient(180deg,black,black) 50% 50% / 0.25rem calc(100% - 2em) no-repeat
		;
}
:is(.margin, .content) > span b::after {content: " (auto)"; font: 0.85em/1.3 Consolas;}

.vert {transform: translateX(-7em) rotate(90deg);}
</style>
</head>
<body>

<main>
	<div class="outer edge">
		<div class="margin">
			<span class="top"><b>margin-block-start</b></span>
		     <span class="bottom"><b>margin-block-end</b></span>
			<span class="left"><b>margin-inline-start</b></span>
		     <span class="right"><b>margin-inline-end</b></span>
			<div class="border">
				<span class="top"><b>border-block-start</b></span>
			     <span class="bottom"><b>border-block-end</b></span>
				<span class="left"><b>border-inline-start</b></span>
				<span class="right"><b>border-inline-end</b></span>
				<div class="padding">
					<span class="top"><b>padding-block-start</b></span>
		    			<span class="bottom"><b>padding-block-end</b></span>
					<span class="left"><b>padding-inline-start</b></span>
					<span class="right"><b>padding-inline-end</b></span>
					<div class="content">
						<span class="height"><b>block-size</b></span>
						<span class="width"><b>inline-size</b></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
<main class="vert">
	<div class="outer edge">
		<div class="margin">
			<span class="top"><b>margin-block-start</b></span>
		     <span class="bottom"><b>margin-block-end</b></span>
			<span class="left"><b>margin-inline-start</b></span>
		     <span class="right"><b>margin-inline-end</b></span>
			<div class="border">
				<span class="top"><b>border-block-start</b></span>
			     <span class="bottom"><b>border-block-end</b></span>
				<span class="left"><b>border-inline-start</b></span>
				<span class="right"><b>border-inline-end</b></span>
				<div class="padding">
					<span class="top"><b>padding-block-start</b></span>
		    			<span class="bottom"><b>padding-block-end</b></span>
					<span class="left"><b>padding-inline-start</b></span>
					<span class="right"><b>padding-inline-end</b></span>
					<div class="content">
						<span class="height"><b>block-size</b></span>
						<span class="width"><b>inline-size</b></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>


</body>
</html>