div中的边框答案

【问题标题】：A border in a divdiv中的边框
【发布时间】：2013-10-30 21:00:55
【问题描述】：

我在一个 div 中创建了一个跨度。这个跨度只是一个黑色边框，位于 div 上方。我希望这个跨度（黑色边框）适应 div 的宽度和高度。就像这个 div 内部的边框一样。

我的问题是边框超出了 div：http://jsfiddle.net/QHRYJ/

div {
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    width: inherit; 
    border: 4px solid;
    margin: 10px;
    height: inherit;
}

-->-->-->--> *编辑：我想要什么：http://www.hostingpics.net/viewer.php?id=623039div.png*

【问题讨论】：

为什么不给div加边框？
为什么不给<div>添加一个边框？
你的边距让你失望，只需将边距设置为 0 并显示：inline-block;
因为对于我的项目，我希望这个跨度通过鼠标悬停（jquery）出现/消失。
@user2657939 只需在悬停时为<div> 添加边框...

标签： css border html

【解决方案1】：

但是，如果您仍然想以自己的方式实现它，那么 cmets 不言自明：

div {
    position: relative;
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    top:0 ;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid;
}

你需要给你的父 div 一个位置，以便它的子元素在它的父元素上定位自己。然后，由于您的 span 是绝对定位的，您可以通过将 left、right、bottom 和 top 显式设置为 0 来扩展它。

如果您希望 span 和 div 之间有间距，请在 span 中添加边距。

【讨论】：

【解决方案2】：

我认为您在这里有一个 XY Problem。根据您在 cmets 中的描述（在悬停时为 <div> 添加边框），您不需要 <span> 元素。您可以使用:hover 伪选择器来实现此目的。例如：

div:hover {
    border: 4px solid #000
}

这是jsFiddle Demo

您可能希望在 <div> 上指定 box-sizing 以防止其调整大小：

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

【讨论】：

请记住，除非您使用box-sizing:border-box，否则这将改变 div 的宽度。