Question

根据标题，您可以看到问题here的演示。

以下是HTML代码：

<div id="outer">
    <div id="inner">
    </div>
</div>

这是CSS代码：

#inner{
  height: 100%;
  width: 100%;
    border-radius: 20px;
    text-shadow: 5px 5px 5px #000000;
    background-color: white;
    opacity: 0;
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

#inner:hover{
    opacity: 1;
}

#outer{
    border: 6px solid #dcc5c5;
    border-radius: 20px;
    text-shadow: 5px 5px 5px #000000;
    position: relative;
    display: inline-block; 
    transition: all 0.5s ease-in-out;
    background-color: red;
  height: 200px;
  width: 200px;
}

我尝试了各种建议here和here，没有解决方案。

Answer 1

您正在使用 margin-top：20px; 在这个元素

#inner {
    height: 100px;

    background-color: #42749F;
    width: 200px;

    /* -1px here for to compansate for the outer border of the container */
    -moz-border-radius: 0 0 9px 9px;
}

删除保证金，它将填充内部元素

Working fiddle

Answer 2

问题在于，如果父母div说：

，孩子会优先考虑

text-font: Sans-Serif

但孩子说：

text-font: Arial

儿童部门的要素优先。换句话说，父母是＆＃34;默认＆＃34;。同样的情况发生在圆角和＃34;和＆＃34; margin-top＆＃34;。＆＃34; margin-top＆＃34;优先考虑。

确保这两个是正确的。

Answer 3

我猜你在内部分区设置的边界在这里会产生问题。删除边框会使子元素完全填充父元素。

这是你在找什么？如果您愿意，可以在评论中详细说明。

.box {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: all 0.5s ease-in-out;
  background-color: red;
  height: 200px;
  width: 200px;
}

.scratcher{
  height: 100%;
  width: 100%;
  background-color: white;
  opacity: 0;
  transition: opacity .5s linear;
}

.scratcher:hover{
  opacity: 1;
}

<div class="box">
  <div class="scratcher">Scratcher</div>
</div>

Answer 4

我注意到，如果您使用嵌套元素的6px（border-width来抵消包含元素.box_1 / #outer的{{1}}中的差异（border-radius） 1}}），你将填补角落的空白。

从嵌套元素的#scratcher / #inner值（6px）中扣除border-radius。

#scratcher / #inner

#inner {
  height: 100%;
  width: 100%;
  border-radius: 13px;
  text-shadow: 5px 5px 5px #000000;
  background-color: white;
  opacity: 0;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#inner:hover {
  opacity: 1;
}

#outer {
  border: 6px solid #dcc5c5;
  border-radius: 20px;
  text-shadow: 5px 5px 5px #000000;
  position: relative;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  background-color: red;
  height: 200px;
  width: 200px;
}

使用圆角时，子div不会填充父div

4 个答案: