html - 如何为多个不重叠的外部和内部 div 添加线条边框

Question

我嵌套了不同的 div:

<div id="outer">

    <div id="parametros"></div>

    <div id="resultados">

        <div id="graficos">
                <div id="bars"></div>
                <div id="fx"></div>
                <div id="pinchetabla">Tabla inútil</div>
        </div>

        <div id="loquerealmenteimporta"></div>  
    </div>

</div>

我添加了以下 CSS:

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
  outline : 1px solid black;

}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
  outline : 1px solid black;

}

#resultados {
  float:right;
  width: 80%;
  height: 100%;
  outline : 1px solid black;
}

      #graficos {
        height: 75%;
        width: 100%;
        outline : 1px solid black;
      }

          #bars {
            float: left;
            height: 100%;
            width: 30%;
            outline : 1px solid black;
          }

          #fx {
            float: left;
            height: 100%;
            width: 30%;
            outline : 1px solid black;
          }          

          #pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
            outline : 1px solid black;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }

为了让所有元素分开，我添加了一条边框线，但随后 result is not exactly what I expected .我知道每个 div 都有自己的一定粗的边框线，所以会发生这种情况。

什么属性提供了预期的结果？

Answer 1

您可以使用 box-shadow:inset 0 0 0 1px; 绘制元素的内部边框，这样元素就会重叠。

在不影响边距和大小的情况下查看元素的位置对于测试很有用。 http://jsfiddle.net/8X9Xk/1/

#loquerealmenteimporta {
    height: 25%;
    width: 100%;
    box-shadow:0 0;
}
div {
    box-shadow:inset 0 0 0 1px;
}