<!DOCTYPE html>
<style>
div.columns {
height: 50px;
width: 110px;
margin: 10px 0;
padding: 10px;
border: solid black;
font-family: Ahem;
font-size: 25px;
color: lightblue;
display: inline-block;
vertical-align: bottom;
position: relative;
}
.column {
position: absolute;
width: 50px;
}
.left { left: 10px; }
.right { right: 10px; }
.column > span {
background-color: lightblue;
display: block;
width: 25px;
height: 25px;
border: solid dodgerblue;
box-sizing: border-box;
}
</style>
<p>
The blue borders should coincide with light blue squares, like this:
<span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
There should be none of this:
<span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
or this:
<span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
</p>
<div class="columns">
<div class="column left"><br><span></span></div>
<div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column left"><br><span></span></div>
<div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column left"><br><span></span></div>
<div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column left"></div>
<div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column right"><span></span></div>
</div>
<div class="columns">
<div class="column right"><span></span></div>
</div>
<div class="columns">
<div class="column left"><br><span></span></div>
<div class="column right"><span></span></div>
</div>
Codebase Browser
chromium