2011-07-11 6 views
1

サイトのレイアウトを変更して、クライアントの企業スタイルガイドの基準を満たすようにしました。スペースエレメントにマージン&パディングを使用する際に考慮すべき点は何ですか?

ガイドでは、ある要素が他の要素から[X] px離れていることを保証する必要があり、この型の要素はその型の要素で整列されている必要があります。

私はこのようにして、既存の間隔がpaddingを使用する場合と、その他の場合にmarginを使用して定義される場合があることがわかります。

これを行う方法がありますか?いつ他のものに賛成して使うべきですか?

答えて

1

これは本当に何とかしています。マージンとパディングは2つの異なるものです。しかし、場合によっては違いに気付かないでしょう。

あなたの違いを示す図:

enter image description here

出典:例えばだから、http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/bilder/boxdim.gif

:あなたが境界線とコンテンツの間のスペースを定義したい場合にのみこれを実現しますパディング(境界線が表示されている間)。

2

平凡な言葉で。

2つのdivが隣り合っている場合、その2つのdivの間のスペースを余白と呼びます。

div内にテキストがある場合、divの端(上端、右端、下端、左端)とテキストの間のスペースは、パディングと呼ばれます。

0

違いは視覚的に最もよく説明されています。

はこれを試してみてください:

<html> 
<head> 
    <style> 
    body { background-color: #E342FF; margin: 0; padding: 0; } 
    #mydiv { border: 2px solid #000000; width: 50%; height: 20%; margin: 50px 0 0 50px; } 
    #mydiv2 { border: 2px solid #000000; width: 50%; height: 20%; padding: 50px 0 0 50px; } 
</style> 
</head> 
<body> 
<div id="mydiv"> 
</div> 
<div id="mydiv2"> 
</div> 
</body> 
</html> 

あなたは余裕が単純にdiv要素を移動され、パディングが実際にそれを大きく作っていることがわかります。

関連する問題