2011-03-13 11 views
5

私はこのコードを持っている:ボーダーを拡張せずにdivをパディングする方法は?

<html> 
<head> 
<style type="text/css"> 
.container { 
    border-bottom: 1px dotted #999999; 
    width:500px; 
    padding-left:200px 
} 
</style> 
</head> 
<body> 
<div class="container">asdf</div> 
</body> 
</html> 

をそして、それは下の境界をインデントする前に200pxのにも適用されているという事実を除いて正常に動作します。下の境界線が200ピクセルで始まるようにします。これはできますか?たぶんhttp://jsfiddle.net/dKVTb/1/

答えて

11

使用の代わりにパディングのマージンや内部のdivを使用する。これは、それがどのように見えるかです

<html> 
<head> 
    <style type="text/css"> 
     .container {    
      width:500px; 
      padding-left:200px 
     } 
     .inner{ 
      border-bottom: 1px dotted #999999; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="inner"> 
      asdf</div> 
    </div> 
</body> 

(コメントで開示された要件と一致するように更新)このように、margin-left

http://jsfiddle.net/ppMmy/

CSSのパディングプロパティでは、要素の境界と要素の内容の間に、 のスペースと のスペースが定義されます。

したがって

ない "パディング" 全体<div>

+0

<div class="container"> <div class="content"> content here </div> </div> 

CSSコードを。 –

+0

次に、内容を持つ子divを追加し、外側にパディング、内側に余白を追加します。 – markt

+0

これはありがとうございます! –

0

そのような場合、この使用:あなたはそれを私にビート

.container {  
    padding-left:200px; 
} 
.content {  
    width:500px; 
    border-bottom: 1px dotted #999999; 
} 
関連する問題