Html Can'；无法删除边距，已将边距设置为0

div元素

id=“textbox”

和

id=“visualizer”

上有一个边距。我已经在CSS中将边距设置为0，但它不会消失。您仍然可以在inspect窗口中看到边距。我已经尝试过更改container div中的显示类型，等等，但问题仍然存在。您可以在下面的链接中找到附加的代码：

---

您在inspector中看到的不是边距，而是负空格，因为您的元素设置为使用

width:50%。默认情况下，
div
元素是
block level
，这意味着它们将从新行开始。浮动将改变此行为

将
float:left
添加到CSS中（您可以像这样合并元素），它们将并排组合在一起，形成100%的宽度

#textbox,
#visualizer {
  height: 100%;
  width: 50%;
  margin: 0px;
  float: left;
}

下面是一个完整的示例，其中元素被着色，以便您可以看到它们彼此相邻：


window.onscroll=function（）{
var navbar=document.querySelector（“#navbar”）；
var Yoffset=this.pageYOffset；
如果（Yoffset>0）{
navbar.style.borderBottom=“1px实心rgba（0,0,0,0.2）”；
}否则{
navbar.style.borderBottom=“”；
}
}
body，
html{
保证金：0；
填充：0；
背景：#FFFFFF；
}
#主容器{
宽度：100%；
最小宽度：100vw；
身高：100%；
}
#主屏幕{
宽度：100vw；
高度：100vh；
保证金：0px自动；
}
#导航栏集装箱{
位置：相对位置；
宽度：100vw；
高度：68.53px；
}
#导航栏{
宽度：100vw；
位置：固定；
显示器：flex；
弯曲方向：行；
文本对齐：居中；
对齐内容：居中对齐；
对齐项目：居中；
证明内容：之间的空间；
背景色：rgba（255、255、255、0.6）；
颜色：#112D34；
不透明度：0.8；
z指数：1；
}
#导航栏#标志{
填充：0px 20px 0px 20px；
}
#导航链接{
显示器：flex；
弯曲方向：行；
文本对齐：居中；
对齐项目：居中；
对齐内容：居中对齐；
保证金：0px自动；
填充：0px；
右边距：30px；
}
#纳武利{
列表样式：无；
保证金：10px 20px 10px 20px；
}
#游戏区{
位置：相对位置；
宽度：100vw；
高度：400px；
保证金：0自动；
}
#游戏区覆盖{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
身高：100%；
边际：0px；
}
#文本框，
#可视化工具{
身高：100%；
宽度：50%；
边际：0px；
浮动：左；
}
#文本框{
背景：浅蓝色；
}
#可视化工具{
背景：浅绿色；
}
#播放列表容器{
宽度：100vw；
高度：600px；
}

维贝基蒂

关于
播放列表
画廊
投资组合

接触


欢迎光临。
试试这个

#textbox h2 {
height: 100%;
width: 50%;
margin: 0px;
}

我建议使用flexbox，它在所有现代浏览器中都受支持，只有当您依赖于比IE10旧的浏览器时，才需要使用float left解决方案
因此，相关的变化是：

#play-area-overlay {
  display: flex;
  height: 100%;
}

#textbox, #visualizer {
  height: 100%;
  width: 50%;
}

这是您的代码片段，其中显示flex的更改以及两个容器的颜色：


window.onscroll=function（）{
var navbar=document.querySelector（“#navbar”）；
var Yoffset=this.pageYOffset；
如果（Yoffset>0）{
navbar.style.borderBottom=“1px实心rgba（0,0,0,0.2）”；
}否则{
navbar.style.borderBottom=“”；
}
}
body，
html{
保证金：0；
填充：0；
背景：#FFFFFF；
}
#主容器{
宽度：100%；
最小宽度：100vw；
身高：100%；
}
#主屏幕{
宽度：100vw；
高度：100vh；
保证金：0px自动；
}
#导航栏集装箱{
位置：相对位置；
宽度：100vw；
高度：68.53px；
}
#导航栏{
宽度：100vw；
位置：固定；
显示器：flex；
弯曲方向：行；
文本对齐：居中；
对齐内容：居中对齐；
对齐项目：居中；
证明内容：之间的空间；
背景色：rgba（255、255、255、0.6）；
颜色：#112D34；
不透明度：0.8；
z指数：1；
}
#导航栏#标志{
填充：0px 20px 0px 20px；
}
#导航链接{
显示器：flex；
弯曲方向：行；
文本对齐：居中；
对齐项目：居中；
对齐内容：居中对齐；
保证金：0px自动；
填充：0px；
右边距：30px；
}
#纳武利{
列表样式：无；
保证金：10px 20px 10px 20px；
}
#游戏区{
位置：相对位置；
宽度：100vw；
高度：400px；
保证金：0自动；
}
#游戏区覆盖{
显示器：flex；
身高：100%；
}
#文本框，
#可视化工具{
身高：100%；
宽度：50%；
}
#文本框{
背景：矢车菊蓝；
}
#可视化工具{
背景：印度红；
}
#播放列表容器{
宽度：100vw；
高度：600px；
}

维贝基蒂

关于
播放列表
画廊
投资组合

接触


欢迎光临。
您是否考虑到h2将具有默认边距或填充？可能就是这样。我没有检查小提琴。我也尝试过将h2的边距和填充设置为0，但没有效果。在inspect too中，边距位于所提到的div元素本身，尽管它们的边距在css中也设置为0。您的文本框h2有一个边距。您已尝试完全删除h2元素，但不幸的是，问题仍然存在。实际上，即使没有h2元素，您也可以在jsfiddle中检查div上的边距，这可能是因为您没有看到边距，而是通过使div的宽度为50%而创建的空间吗？设置框大小：border box；也可能有助于解决跨浏览器问题。也许OP认为边际是问题所在，而边际是推动下一个元素的边界，所以我提到它只是为了以防万一。@Davidylan同意边界框是好的做法，但el
#textbox h2 {
height: 100%;
width: 50%;
margin: 0px;
}

#play-area-overlay {
  display: flex;
  height: 100%;
}

#textbox, #visualizer {
  height: 100%;
  width: 50%;
}