如何給內部div分配同等的保證金？

我們如何讓內部股利與所有四方的外部股利具有相同的利潤率？如何給內部div分配同等的保證金？

這是我已經試過：

<div class="outer"> 
<div class="inner"> 
    A 
</div> 
</div>

我的風格：

div 
{ 
    overflow: hidden; 
} 

.outer{ 
    height: 100px; 
    width: 100px; 
    background-color: gainsboro; 
} 

.inner{ 
    background-color: wheat; 
    margin: 5px;  
}

注：我想用純CSS來實現這一+我不想做這樣的事情：

.inner{ 
    height: 90px; 
}

或

.inner{ 
    height: 90%; 
}

來源

2013-12-17 MackMon

你在*解決方案，我不想做這樣的財產以後*是純CSS –

給出padding至.outer。

嘗試：

.outer{ 
    height: 90px; 
    width: 90px; 
    padding:5px; 
    background-color: gainsboro; 
} 
.inner{ 
    background-color: wheat;   
    height:100%; 
}

DEMO here.

來源

2013-12-17 07:41:28 Hiral

它是反向.inner { 高度：90像素; } – MackMon

好了，你有奇怪的願望，你不想使用height財產，所以剩下的唯一方法是使用display: table;的父元素和display: table-cell;兒童元件。並且因爲td元素將不會採用margin上午使用padding上的父元素與box-sizing屬性設置爲border-box，以便它將計數padding而不是元素外部。

Demo

div 
{ 
    overflow: hidden; 
} 

.outer{ 
    height: 100px; 
    width: 100px; 
    background-color: gainsboro; 
    display: table; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 5px; 
} 

.inner{ 
    background-color: wheat; 
    display: table-cell; 
}

來源

2013-12-17 07:44:05

Dum ...如果內部div的內容超過100px的高度:)？ – MackMon

@MackMon歡迎:) –

Dum ...如果內部div的內容超過100px的高度:)？ – MackMon

給內部的div頂部，底部，左，右。這將使它和外部之間的間距。

<!doctype html> 
<html> 
    <head> 
     <title> 
      Bla! 
     </title> 
     <style type='text/css'> 
      div { overflow:hidden; } 
      div.outer {height:100px; width:100px; background-color:gainsboro; position:absolute} 
      div.outer >div {top:5px; left:5px; right:5px; bottom:5px; position:absolute; background-color: wheat;} 
     </style> 
    </head> 
    <body> 
     <div class='outer'> 
      <div></div> 
     </div> 
    </body> 
</html>

來源

2013-12-17 07:44:51

即使這是一個很好的解決方案，所以我+1 :) –

使用此解決方案，外部可能會得到任何塊大小（相對，固定等）的定義。內部應該有絕對大小（它在外部）。 –

我沒有測試過這個，但不應該'div.outer'是'position：relative'？ –

如何給內部div分配同等的保證金？

回答

相關問題