我有一个使用 transform: rotate 的页面，但在元素未旋转的位置留下了一大片空白。我发现其他几个人也在问类似的问题，但我无法调整这些答案来解决我目前的问题。我认为它们可能包含正确的解决方案，而我只是在尝试将其应用于我的案例时犯了一个错误:
Css rotate div creates white space on top
如您所见，旋转文本下方有很多空白区域。我希望文本在同一个位置结束，没有空白。
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>最佳答案
通过使旋转元素成为“ block ”而不是“内联 block ”，下面的空间消失了。
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;
}
正如您在编辑后的 fiddle 中看到的那样, 添加的新文本恰好位于旋转文本的下方，没有间隙。
关于html - 变换 : rotate is creating unwanted white space，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29420082/