flexbox 中图像和滑块之间不需要的空间。如何删除它？答案

【问题标题】：Unwanted space between image and slider in flexbox. How to remove it?flexbox 中图像和滑块之间不需要的空间。如何删除它？
【发布时间】：2021-08-13 10:23:22
【问题描述】：

#slider1 {
  height: 1px;
  width: 90px;
  transform: rotate(270deg);
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="container">
  <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
  <input type="range" id="slider1" />
</div>
<p>See the space between the image and slider?</p>

如何删除图像和滑块之间不需要的空间？似乎这里没有填充或边距，所以我的尝试失败了。谢谢！

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

空间是由元素本身在进行变换之前创建的，旋转不会删除该空间。

因此，在旋转输入之前执行translateX(-50%)：如果您需要更好地控制位置，请使用不同于 50% 的值

#slider1 {
  height: 1px;
  width: 90px;
  transform: translateX(-50%) rotate(270deg);
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="container">
  <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
  <input type="range" id="slider1" />
</div>

【讨论】：

对不起，我迟到了，只有一个问题：写transform属性时顺序重要吗？我认为确实如此，我不小心互换了它们，结果出乎意料...

【解决方案2】：

试试这个

你可以改padding: 0 11px;

#slider1 {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 0px;
    height: 90px;
    padding: 0 2px;
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="container">
  <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
  <input type="range" id="slider1" />
</div>
<p>See the space between the image and slider?</p>

【讨论】：

虽然这种方法有效，但自定义 CSS 样式存在一些问题。有关详细信息，请参阅我的上一个问题。