I'；我对基本CSS有问题。容器中有图像时会移动 div{ 宽度：50%；保证金：自动； } .cardBox{ 显示：内联块；边框：实心1px黑色；高度：102px；宽度：68px；保证金：100px 0px 0px 0px；填充：0px； } span-img{ 身高：100%；宽度：100%； }_Css

I'；我对基本CSS有问题。容器中有图像时会移动 div{ 宽度：50%；保证金：自动； } .cardBox{ 显示：内联块；边框：实心1px黑色；高度：102px；宽度：68px；保证金：100px 0px 0px 0px；填充：0px； } span-img{ 身高：100%；宽度：100%； }

css

I'；我对基本CSS有问题。容器中有图像时会移动 div{ 宽度：50%；保证金：自动； } .cardBox{ 显示：内联块；边框：实心1px黑色；高度：102px；宽度：68px；保证金：100px 0px 0px 0px；填充：0px； } span-img{ 身高：100%；宽度：100%； },css,Css,铬和FF的结果相同。我已经尝试将图像的高度/宽度设置为与span cardBox匹配，我也尝试了小于100%的设置。我还尝试了auto。所有这些都会导致容器跨度的各种移动。图像本身是99x66px，下面是它的副本：我的另一个问题是，为什么跨距之间有间隙？内联块出现了一些问题。将其更改为inlineflex，工作正常下面是片段 div{ 宽度：50%；保证金：自动； } .cardBox{ 显示：内联flex；边框：实心1px黑色；高度：102px；宽度：68px；保证金：100

铬和FF的结果相同。我已经尝试将图像的高度/宽度设置为与span cardBox匹配，我也尝试了小于100%的设置。我还尝试了

auto

。所有这些都会导致容器跨度的各种移动。图像本身是99x66px，下面是它的副本：

我的另一个问题是，为什么跨距之间有间隙？

内联块出现了一些问题。将其更改为

inlineflex

，工作正常

下面是片段

div{
宽度：50%；
保证金：自动；
}
.cardBox{
显示：内联flex；
边框：实心1px黑色；
高度：102px；
宽度：68px；
保证金：100px 0px 0px 0px；
填充：0px；
}
span-img{
身高：100%；
宽度：100%；
}

好吧，只需将

display:block

添加到跨度中的img（下面的代码）。
第二个是，

display:inline block

创建一个值为4px的

margin right

（我不记得为什么会这样，可能以后需要用谷歌搜索），所以有两种方法修复它

使用

float:left

代替

display:inline块

或将

页边距右侧：-4px

添加到

cardBox


div{
宽度：50%；
保证金：自动；
}
.cardBox{
/*显示：内联块*/
边框：实心1px黑色；
高度：102px；
宽度：68px；
保证金：100px 0px 0px 0px；
填充：0px；
浮动：左；
}
span-img{
身高：100%；
宽度：100%；
显示：块；
}

你说的“移动”是什么意思？他们（跨度）中断到第二行？剪切并粘贴代码，您将看到。它们向下移动了一个或几个像素。干杯，这就对它进行了排序。你知道为什么盒子之间会有间隙吗？在我的实际应用程序中，我在多个框之间拖动图像，然后单击按钮将它们全部向左移动，这样卡之间就不会有空框。将它们堆叠到左侧涉及.removeChild（）和.appendChild（）。在我做了那个操作之后，盒子之间的间隙消失了，要么盒子里有一张卡片，要么盒子里现在有一张卡片。当我检查css时，未标记的图像和容器跨距，以及附加了图像的跨距，都具有完全相同的计算css值。这不是一个bug。它是

内联块

、

内联

和

内联flex

中的一项功能。浏览器为外观提供了空间。因为它是两个不同的标记，所以浏览器用空格分隔它，就像浏览器用新行分隔块一样。如果您想删除空间，请查看此项-最好将

font-size:0

发送给集装箱管理员！这个链接帮助我理解了为什么在我单击按钮后，我的跨度会丢失它们的空间（在对DOM进行进一步操作之前，我使用一个函数“清除”DOM中的空白和空文本节点）。

<html>
<head>
<style>
    <!-- * {
    box-sizing: border-box;
    } -->

    div {
        width: 50%;
        margin: auto;
    }

    .cardBox {
        display: inline-block;
        border: solid 1px black;
        height: 102px;
        width: 68px;
        margin: 100px 0px 0px 0px;
        padding: 0px;
    }

    span img {
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
    <div>
        <span class="cardBox" id="box1"><img src="h4.png"></span>
        <span class="cardBox" id="box2"><img src="h4.png"></span>
        <span class="cardBox" id="box3"><img src="h4.png"></span>
        <span class="cardBox" id="box4"></span>
        <span class="cardBox" id="box5"></span>
    </div>
</body>
</html>