blob: 0c0ae91e3b66086461994c3052e9e09b1608be67 [file] [log] [blame]
<!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: 25px;
}
.first { right: 10px; }
.second { right: 70px; }
.column > span {
background-color: lightblue;
display: block;
width: 25px;
height: 25px;
border: solid dodgerblue;
box-sizing: border-box;
}
.special > .first > span {
margin-top: 40px;
height: 10px;
}
.special > .first span:last-child {
height: 10px;
}
.special > .second span:first-child {
height: 15px;
}
</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 first"><br><span></span></div>
<div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column first"><br><span></span></div>
<div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column first"><br><span></span></div>
<div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column first"></div>
<div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
<div class="column second"><span></span></div>
</div>
<div class="columns">
<div class="column second"><span></span></div>
</div>
<div class="columns special">
<div class="column first"><span></span></div>
<div class="column second"><span></span></div>
</div>