Search code examples
htmlcsswhitespacecss-transforms

transform: rotate is creating unwanted white space

I have a page which uses transform: rotate, but leaves a large whitespace where the element would have been were it not rotated. I have found a couple of other people asking a similar question, but I have been unable to adapt those answers to solve my present problem. I think that they probably contain the correct solution, and I am just making a mistake in trying to apply it to my case:

Css rotate div creates white space on top

White space around css3 scale

As you can see, there's a lot of white space beneath the rotated text. I would like the text to end up in the same place, without that white space.

div.titles {
  transform: rotate(90deg);
  display: inline-block;
  right: 0;
  left: 367px;
  height: 260px;
  top: -4px;
}

p.volumes {
  padding: 0;
  font-family: "Arial Narrow";
  line-height: 220%;
  font-size: 10;
}

ul.titles {
  list-style-type: none;
  text-align: center;
}

ul.titles li {
  padding: 8px;
  font-family: "Subway", "Courier", "serif";
  font-size: 11px;
  color: #000000;
}
<BODY>
  <DIV class="titles" id="sideways" style="position: relative;">";
    <p class="volumes" id="volumes"></p>";

    <ul class="titles">
      <li>ale.imzqzfojdobcggydk</li>
      <li>mouwl sxjjwrk,osbl</li>
      <li>cqjpjfeqhgovtto</li>
    </ul>
  </DIV>
</BODY>

Solution

  • By making the rotated element 'block' rather than 'inline-block', the space below disappears.

    div.titles {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    display: block;
    right: 0;
    left: 367px;
    height: 260px;
    top: -4px;
}

    As you can see in this edited fiddle, new text added falls right below the rotated text without a gap.