83 lines
2.4 KiB
HTML
83 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-dimension">
|
|
<meta name="assert" content="Margins around margin boxes.">
|
|
<meta name="flags" content="ahem">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
|
<link rel="match" href="dimensions-012-print-ref.html">
|
|
<style>
|
|
:root {
|
|
print-color-adjust: exact;
|
|
}
|
|
@page {
|
|
margin: 4em 5em 8em 7em;
|
|
width: 20em;
|
|
height: 16em;
|
|
font: 16px/1 Ahem;
|
|
white-space: pre-wrap;
|
|
|
|
@top-left-corner {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
margin: auto;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
content: "x x\a\a0x\ax x";
|
|
background: pink;
|
|
}
|
|
|
|
/* Top-left has a min content width of 3em. Top-right has an inner min
|
|
content width of 2em. Additionally, it has 25% margins on each side. In
|
|
the horizontal direction that means 20em*0.25 = 5em on each side. Outer
|
|
min content width for top-right becomes 12em.
|
|
|
|
Available space is 20em. Unused space is 5em. Total flex is 15. Left flex
|
|
is 3. Right flex is 12.
|
|
|
|
Left outer width: 3em + 5em*3/15 = 4em
|
|
Right outer width: 12em + 5em*12/15 = 16em */
|
|
@top-left {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
content: "xxx";
|
|
background: hotpink;
|
|
}
|
|
@top-right {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
margin: 25%;
|
|
content: "xx";
|
|
background: yellow;
|
|
}
|
|
|
|
/* Right-top has an inner min content height of 2em. It's margin-top is 1em,
|
|
so the outer min content height becomes 3em. Right-bottom has an inner
|
|
min content height of 1em. Additionally, it has 25% margins on each side.
|
|
In the vertical direction that means 16em*0.25 = 4em on each side. Outer
|
|
min content height for right-bottom becomes 9em.
|
|
|
|
Available space is 16em. Unused space is 4em. Total flex is 12. Top flex
|
|
is 3. Bottom flex is 9.
|
|
|
|
Top outer height: 3em + 4em*3/12 = 4em
|
|
Bottom outer height: 9em + 4em*9/12 = 12em */
|
|
@right-top {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
margin-top: 1em;
|
|
content: "x\ax";
|
|
background: hotpink;
|
|
}
|
|
@right-bottom {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
margin: 25%;
|
|
content: "x";
|
|
background: yellow;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: blue;
|
|
}
|
|
</style>
|