html去不了边距,删除因HTML中的换行而导致的不需要的边距

最新推荐文章于 2024-07-04 23:22:42 发布

未眠-1031

最新推荐文章于 2024-07-04 23:22:42 发布

阅读量283

点赞数

文章标签： html去不了边距

本文讨论了在使用inline-block布局时遇到的间隙问题，通过实例展示了如何在保持原始HTML结构的同时消除间隙。重点介绍了两种解决方法，并提到了避免使用浮动和绝对定位的方法。同时，还提及了一个关于图像引入导致布局异常的现象及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在block1和block2之间获得了display: inline-block样式的不必要的保证金。请参阅此jsFiddle。

HTML

block1

block2

CSS

* {

margin: 0px;

padding: 0px;

}

#container {

background-color: #f00;

width: 100%;

height: 200px;

}

#innercontainer {

background-color: #0f0;

width: 200px;

height: 200px;

margin: 0px auto;

}

#block1, #block2 {

display: inline-block;

background-color: #00f;

height: 200px;

}

当我将HTML更改为此时，边距消失了：

block1

block2

或者这个：

block1

block2

虽然我更喜欢后者，但我仍然想知道是否有人知道解决方案以便我可以使用原始HTML，但innercontainer中没有空格显示。另请注意，我希望避免在float: left;和block1上设置block2或使其position: absolute|relative浮动，因为这会在我的布局中产生其他问题。有什么想法吗？

修改

好的，所以我的布局遇到了更多麻烦。当我向block1添加一个图像时，整个块向下移动，非常奇怪(见jsFiddle)。我现在正在使用float: left，并且必须弄清楚如何添加消耗右侧自由空间的div。