在固定大小的父div中插入div 10px？

Question

给定一个未知或可变大小的父div和一个子div，子div如何从父div的每一边插入10px？

我想避免使用position，如果我添加width:100%; height:100%; margin:10px;，则会导致孩子从右侧和下方伸出20px。

为了澄清，孩子需要适合父div。父div不能适应孩子。父母的身材未知。

Answer 1

如果你使用CSS box-sizing，那将包括宽度内的填充。 正如你所说......

  

它会导致孩子从右侧和底部伸出20px。

......这样可以防止这种情况发生。

#parent, #child {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */
}

或者，您在#parent上设置10px填充，然后将#child设置为100％宽度和高度。

Answer 2

div#child {
    position:relative;
    margin:10px;
}

Answer 3

使用此：

#parent {
    padding: 10px;
}

#child {
    height: 100%;
    width: 100%;
}

Working Fiddle here