变换：旋转正在创建不需要的空白答案

【问题标题】：transform: rotate is creating unwanted white space变换：旋转正在创建不需要的空白
【发布时间】：2015-04-02 18:36:53
【问题描述】：

我有一个使用 transform:rotate 的页面，但是如果没有旋转元素，它会留下一个很大的空白。我发现其他几个人提出了类似的问题，但我无法调整这些答案来解决我目前的问题。我认为它们可能包含正确的解决方案，我只是在尝试将其应用于我的案例时犯了一个错误：

Css rotate div creates white space on top

White space around css3 scale

这是一个向您展示问题的 jsfiddle：

https://jsfiddle.net/jonotrain/L2h12qm5/

如您所见，旋转后的文本下方有很多空白区域。我希望文本结束在同一个地方，没有那个空白。

这是 HTML：

<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>

还有 CSS：

 div.titles {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-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;
}

【问题讨论】：

不知道你在问什么。
我认为你应该多玩一些 transform 和 transform-origin 这样你就可以获得预期的结果，我修改了你的 fiddle 这样你就可以看到我在说什么，我不是确定这是否是您想要做的，所以我不会将其作为答案。您可以获取transform和transform-origin的更多信息
我在问如何在不留下底部空白的情况下进行相同的旋转。我看了你的编辑@valarauko，但似乎空白仍然存在。
您可以通过将标题 div 设置为绝对位置来消除空白，它不适用于相对位置，因为容器仍然具有对象高度参考。这是fiddle。我想这就是你想要的

标签： html css whitespace css-transforms

【解决方案1】：

通过使旋转的元素成为“块”而不是“内联块”，下面的空间消失了。

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 中看到的那样，添加的新文本正好位于旋转文本的正下方，没有间隙。

【讨论】：

【解决方案2】：

为您提供新解决方案，如果上述 CSS 不适合您，请使用此技巧。在 TD 标签中添加一个 Span 标签。您可以添加左右边距。

<td>

<span style="float: left; 
transform: rotate(-90deg); 
white-space: nowrap; 
width: 30px;">
VACATE ORDER
</span>

</td>

【讨论】：

【解决方案3】：

使用这个 CSS 属性::::::

.div.titles {
    float: left;
    margin-left: 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    white-space: nowrap;
    width: 20px;
}

【讨论】：