Html 我有大量的额外空间不知从何而来

我有一些图片使用html和css排列在一起。由于某种原因，我在container div之后得到了大量额外的空间，而它本不应该这样做。我真的非常感谢你的帮助

此项目当前是实时托管的，可以在以下位置找到：

正文{
保证金：0；
}
#混音带{
-ms-zoom:0.25；
-moz变换：比例（0.25）；
-moz变换原点：0；
-o变换：标度（0.25）；
-o变换原点：0；
-webkit变换：比例（0.25）；
-webkit变换原点：中间-顶部；
显示：内联块；
身高：0；
}
#案例{
位置：相对位置；
顶部：-15px；
左：15px；
z指数：1；
显示：内联块；
保证金：0；
}
#影子{
位置：相对位置；
顶部：-836px；
显示：内联块；
保证金：0；
}
#磁盘1{
位置：相对位置；
顶部：-1548px；
左：150px；
z指数：0；
动画：磁盘8s无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
显示：内联块；
保证金：0；
}
#磁盘2{
位置：相对位置；
顶部：-1548px；
左：255px；
z指数：0；
动画：磁盘8s无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
显示：内联块；
保证金：0；
}
@关键帧磁盘{
从{
-ms变换：旋转（0度）；
/*IE 9*/
-webkit变换：旋转（0度）；
/*狩猎*/
变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
/*IE 9*/
-webkit变换：旋转（360度）；
/*狩猎*/
变换：旋转（360度）；
}
}

混音带

我想这是因为SVG放在标记中时呈现出奇怪的效果。我建议尝试使用固定大小的内联SVG。

---

现在，它的行为类似于img标记，但保留了与全尺寸svg相同的空间。

我猜这是因为svg放置在标记中时呈现出奇怪的效果。我建议尝试使用固定大小的内联SVG。

---

现在，它的行为类似于img标记，但保留了与全尺寸svg相同的空间。

当我将代码粘贴到jsfiddle中时，您的代码似乎工作得很好，因此可能还有其他东西起作用

尽管如此，我还是做了一些可能有所帮助的修改：

1） 将

#混音带

定位为相对，然后将其子项定位为绝对（相对于其父项为绝对）

2） 我添加了一个

.disk

类来干燥代码，因为有两个磁盘，并且只有

顶部

和

左侧

属性不同

正文{
保证金：0；
}
#混音带{
-ms-zoom:0.25；
-moz变换：比例（0.25）；
-moz变换原点：0；
-o变换：标度（0.25）；
-o变换原点：0；
-webkit变换：比例（0.25）；
-webkit变换原点：中间-顶部；
身高：0；
显示：块；
位置：相对位置；
利润率：10px自动0px；
}
#案例{
位置：绝对位置；
顶部：0px；
左：15px；
z指数：1；
显示：内联块；
保证金：0；
}
#影子{
位置：绝对位置；
顶部：15px；
显示：内联块；
保证金：0；
}
.磁盘{
位置：绝对位置；
z指数：0；
动画：磁盘8s无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
显示：内联块；
保证金：0；
}
#磁盘1{
顶部：146px；
左：151px；
}
#磁盘2{
顶部：146px；
左：734px；
}
@关键帧磁盘{
从{
-ms变换：旋转（0度）；
/*IE 9*/
-webkit变换：旋转（0度）；
/*狩猎*/
变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
/*IE 9*/
-webkit变换：旋转（360度）；
/*狩猎*/
变换：旋转（360度）；
}
}

---

当我将代码粘贴到JSFIDLE中时，您的代码似乎工作得很好，所以可能还有其他一些东西在起作用

尽管如此，我还是做了一些可能有所帮助的修改：

1） 将

#混音带

定位为相对，然后将其子项定位为绝对（相对于其父项为绝对）

2） 我添加了一个

.disk

类来干燥代码，因为有两个磁盘，并且只有

顶部

和

左侧

属性不同

正文{
保证金：0；
}
#混音带{
-ms-zoom:0.25；
-moz变换：比例（0.25）；
-moz变换原点：0；
-o变换：标度（0.25）；
-o变换原点：0；
-webkit变换：比例（0.25）；
-webkit变换原点：中间-顶部；
身高：0；
显示：块；
位置：相对位置；
利润率：10px自动0px；
}
#案例{
位置：绝对位置；
顶部：0px；
左：15px；
z指数：1；
显示：内联块；
保证金：0；
}
#影子{
位置：绝对位置；
顶部：15px；
显示：内联块；
保证金：0；
}
.磁盘{
位置：绝对位置；
z指数：0；
动画：磁盘8s无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
显示：内联块；
保证金：0；
}
#磁盘1{
顶部：146px；
左：151px；
}
#磁盘2{
顶部：146px；
左：734px；
}
@关键帧磁盘{
从{
-ms变换：旋转（0度）；
/*IE 9*/
-webkit变换：旋转（0度）；
/*狩猎*/
变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
/*IE 9*/
-webkit变换：旋转（360度）；
/*狩猎*/
变换：旋转（360度）；
}
}

---

而不是在内部元件上设置相对位置。尝试设置相对于外部div的位置，然后将所有其他元素设置为位置：绝对

“相对位置”通常用于包含其中已定位的元素

当元素通常处于绝对位置时。它位于整个页面中

如果该元素位于相对元素的内部。它将位于该元素中

这将解决你的空间问题

至于它为什么创造了这么多的空间。与上面的答案相同。SVG以dom检测的方式呈现

#case{
    position:absolute;
    ...

#mixtape{   
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: center top;
    ...