Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
-->
<html><head>
<meta charset="utf-8">
<title>Reference for legend block-axis margins</title>
<style>
.fieldset {
display: block;
position: relative;
width: 40px;
border: 2px solid blue;
padding: 4px;
}
.legend {
display: block;
position: absolute;
width: 10px;
height: 20px;
padding: 0;
margin: 0;
background: grey;
}
.t2 .fieldset { border-top-width: 12px; }
.t3 .fieldset { border-top-width: 12px; }
.t3 .legend { height: 12px; background:white; }
.legend > x { display:block; position:relative; height:6px; background:grey; margin-top:3px; }
div { border: 1px solid; margin: 0 2px 10px 0; }
c { display:block; height:10px; background: lightgrey; }
f { float: left; }
</style>
</head>
<body>
<f>
<div>
<span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span>
</div>
<div>
<span class="fieldset" style="margin-top:19px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-12px"></span><c style="margin-top:8px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
</div>
<div>
<span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:19px"></c></span>
</div>
<div>
<span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:29px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-2px; z-index:1"></span><c style="position:relative; z-index:1"></c></span>
</div>
</f>
<f class=t2>
<div>
<span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span>
</div>
<div>
<span class="fieldset" style="margin-top:14px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
</div>
<div>
<span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:14px"></c></span>
</div>
<div>
<span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:24px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="top:-12px; height:16px"></span><c></c></span>
</div>
</f>
<f class=t3>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
</div>
<div>
<span class="fieldset" style="margin-top: 4px"><span class="legend" style="margin-top: -16px"><x style="top:3px"></x></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:4px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:14px"></c></span>
</div>
<div>
<span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
</div>
</f>
</body>
</html>