跨度超出 div 且不完全适合答案

【问题标题】：span coming outside of div and not fitting exactly跨度超出 div 且不完全适合
【发布时间】：2019-03-13 16:12:57
【问题描述】：

我已将我的问题转换为简单的代码。我希望带有 class in 的 span 类块能够完全包装 div 类。它在 div 的右下角对角线外出现。有人可以帮忙吗。想法是，在我试图解决的更大问题中，希望能够有时用 div 有时用 span 创建边框。有人可以帮助如何制作这些 div 并跨越彼此吗？

.checker {
  width: 17px;
  height: 17px;
  border: 10px solid green;
  display: inline-block;
}

.in {
  width: 17px;
  height: 17px;
  border: 10px solid red;
  display: inline-block;
}

&lt;div class="checker" id="uniform-deleteradio_0"&gt;&lt;span class="in"&gt;&lt;/span&gt;&lt;/div&gt;

14/3 更新。感谢所有的答案。一些技术会使内部跨度进入外部div。但是，我想要的是 div 和 span 都被包裹在另一个之上。比如说，我给 div 或 span 赋予边框，它应该看起来像单个边框，并且 div 和 span 看起来都像单个元素。这就是我实际项目中的情况，我无法消除 div 或 span。 span 有一个图像作为背景（复选框），外部 div 有一个边框。

【问题讨论】：

从 div 中删除宽度/高度？让我们简单地让浏览器为你计算高度/宽度
我不知道你在追求什么。你能解释清楚一点吗？
checker 内部是 17x17，in 是 37x37 - 它如何适合 inside 然后...

标签： html css

【解决方案1】：

我认为问题在于由于边框的原因，您的内部跨度超出了周围 div 框的大小。你可以让你的外部 div 更大（+20px）以适应内部盒子。

【讨论】：

【解决方案2】：

将height 和width 从外部div 中移除，使其足够大以适合内部大小的div。我还将内部div的显示属性更改为block。

    <!DOCTYPE html>
    <html lang="en">
    <style>
    .checker { border: 10px solid green; display: inline-block; }
    .in { width: 17px; height: 17px; border: 10px solid red; display: block; }
    </style>
    <div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>
    </html>

【讨论】：

或者你可以保留内联块并使用vertical-align:top 来避免底部的坏空格
感谢 Simran、Temani 和所有人的帮助。更新了描述以更加清晰。

【解决方案3】：

您应该将 .checker 的高度和宽度设置为“自动”。如果不适合，固定的宽度和高度当然会将任何孩子放在 div 之外

【讨论】：

【解决方案4】：

这终于对我有用了。左边距：-10px 右边距：-10px

【讨论】：