3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: stretching input items with auto-margins and/or orthogonal writing-mode
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1317168">
10 <style type=
"text/css">
11 * { color:black
; background-color:white
; font:10px/1.5 monospace
; padding:0; margin:0; }
12 * { vertical-align: top
; }
17 padding: 2px 4px 3px 6px;
26 background: lightgrey
;
29 .js { justify-self: start
; }
30 .je { justify-self: end
; }
31 .jc { justify-self: center
; }
32 .as { align-self: start
; }
33 .ae { align-self: end
; }
34 .ac { align-self: center
; }
36 .m { margin: 7px 3px 1px 5px; }
37 .p { padding: 3px 1px 5px 7px; }
38 .hma10 { margin: 7px 3px 1px 0; }
39 .hmaa { margin: 7px 0 1px 0; }
40 .vma10 { margin: 0 7px 3px 1px; }
41 .vmaa { margin: 0 7px 0 1px; }
43 .mxh { height: 16px; }
45 .vr { writing-mode: vertical-rl
; }
50 <div class=
"grid"><div><input></div></div>
51 <div class=
"grid"><input class=
"m" style=
"width:190px; height:20px"></div>
52 <div class=
"grid"><input class=
"hma10 je" style=
"height:20px"></div>
53 <div class=
"grid"><input class=
"hmaa jc" style=
"height:20px"></div>
54 <div class=
"grid"><input class=
"vr hma10 je" style=
"height:20px"></div>
55 <div class=
"grid"><input class=
"vr hmaa jc" style=
"height:20px"></div>
56 <div class=
"grid"><input class=
"vr je" style=
"width:198px; height:28px"></div>
58 <div class=
"grid"><input class=
"vma10 ae" style=
"width:190px"></div>
59 <div class=
"grid"><input class=
"vmaa ac" style=
"width:190px"></div>
60 <div class=
"grid"><input class=
"vr vma10" style=
"width:190px;"></div>
61 <div class=
"grid"><input class=
"vr vmaa" style=
"width:190px;"></div>
62 <div class=
"grid"><input class=
"vr p vma10" style=
"width:182px;"></div>
63 <div class=
"grid"><input class=
"vr p vmaa" style=
"width:182px;"></div>
65 <div class=
"grid"><input class=
"mxw m" style=
"height:20px"></div>
66 <div class=
"grid"><input class=
"mxw hma10 je" style=
"height:20px"></div>
67 <div class=
"grid"><input class=
"mxw hmaa jc" style=
"height:20px"></div>
68 <div class=
"grid"><input class=
"mxw vr hma10 je" style=
"width:15px; height:20px"></div>
69 <div class=
"grid"><input class=
"mxw vr" style=
"height:28px"></div>
71 <div class=
"grid"><input class=
"mxh m je" style=
"width:190px"></div>
72 <div class=
"grid"><input class=
"mxh hma10 je"></div>
73 <div class=
"grid"><input class=
"mxh hmaa jc"></div>
74 <div class=
"grid"><input class=
"mxh vr hmaa jc" style=
"width:15px"></div>
75 <div class=
"grid"><input class=
"mxh vr" style=
"width:198px"></div>
77 <div class=
"grid" style=
"grid:auto/auto; padding:0;"><input></div>
78 <div class=
"grid" style=
"grid:auto/auto; padding:0;"><input></div>