Text effecting div alignment
I'm trying to get the tops of elements '.wrap1' and '.wrap2' to line up.
As is you can see in this jsfiddle that the top of 'wrap1' is a little
below '.wrap2' yet when I delete the displayed text from '.wrap2' the tops
do line up. Can any one explain why the text is lowering the top of
'.wrap1'?
<html>
<body>
<ul
style="margin:0px 0px!important;position:relative;width:100%"
class="mainList"
id="dateMainList">
<li
class="list-element"
id=""
style="width:100%">
<div
class="list-inner-wrap"
style="border:1px solid black">
<div
class="wrap1"
style="display:inline-block;background:white;border:2px
solid black;height:50px;width:50px">
<div
class="line-1"
style="display:block;text-align:center;font-size:10pt">1</div>
<div
class="line-2"
style="display:block;text-align:center;font-size:10pt">2</div>
<div
class="line-3"
style="display:block;text-align:center;font-size:10pt">3</div>
</div>
<div
class="wrap2"
style="display:inline-block;height:50px;background:green;width:200px"></div>
</div>
</li>
</ul>
</body>
No comments:
Post a Comment