I'm facing a challenge with aligning a rotated div and an unordered list in a container. Adjusting the margin of either element does the trick, but changing font-family or letter-spacing globally affects the spacing between the two.
Open the fiddle and inspect the letter-spacing property on * to visually understand the issue.
#container {
z-index: 2147483645;
height: 400px;
width: 400px;
background-color: grey;
display: inline-block;
position: fixed;
}
#tab {
background-color: #9F8F6C;
display: inline-block;
vertical-align: top;
height: 100%;
width: 40px;
padding: 0;
margin: 0;
}
#tab a {
position: fixed;
width: 400px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg) translateX(-100%);
transform-origin:left top;
font-size: 18px;
cursor: pointer;
text-align: center;
color: #F5F5F5;
text-decoration: none;
padding: 0;
margin: 0;
}
#my-list {
background-color:rgba(255,255,255,0.5);
display: inline-block;
vertical-align: top;
height: 100%;
width: 65px;
padding: 0;
margin: 0;
}
* {
letter-spacing: 2px;
}<div id='container'>
<div id='tab'>
<a id='tab-text'>hellloooo</a>
</div>
<ul id='my-list'>
</ul>
</div>