テキストの書式設定時に余白やパディングを使用する必要がありますか？

Question

私は自分のサイト用にいくつかのCSSをデザインしています。私はのセクションを単一の背景のヘッダーと段落を持つ均一なテキストでフォーマット（ヘッダーと段落の間に適切な間隔を追加する）する必要があります。これは、marginまたはpaddingプロパティを使用して行うことができます。私はCSSのこれらの2つの違いを理解しています。また、これらのCSSプロパティのSOに関する利用に関する質問の多くがあります

• Difference between margin and padding?
• When to use margin vs padding in CSS
• Margin or padding what is recommended?

しかし、疑いの色合いは、どのような性質の光があってはなりません適切なテキストフォーマットに使用されます。

私はテキスト要素（ヘッダや段落）の間の間隔を制御するためにmarginまたはpaddingを使用する必要がありますのは、私はこのようなテキストの書式を設定する必要があるとしましょうか？ <p>と<h..>タグで使用することをお勧めしますか？一般的なプラクティスは何ですか？ここで

は、私は今のところ思い付いたものです：

/* tiny reset */ 
 
html { font-size: 10px; } 
 
html, body { margin: 0; padding: 0; } 
 
* { box-sizing: border-box; } 
 

 
p { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 1.6rem; 
 
    line-height: 2.5rem; 
 
    margin: 0.6rem 0 2.0rem 0; 
 
    padding: 0 2px 4px 2px; 
 
    width: 100%; /* Opera needs this */ 
 
    text-rendering: optimizeLegibility; 
 
} 
 

 
h1, h2 { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    padding: 0 2px 4px 2px; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
h1 { 
 
    font-size: 4.0rem; 
 
    line-height: 4.0rem; 
 
    margin: 2.6rem 0 2.0rem 0; 
 
} 
 
h2 { 
 
    font-size: 3.2rem; 
 
    line-height: 3.2rem; 
 
    margin: 2.4rem 0 2.0rem 0; 
 
} 
 

 
.wrap { 
 
    margin: 20px; 
 
    padding: 20px; 
 
    -webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3); 
 
    -moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3); 
 
    box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3); 
 
}

<div class="wrap"> 
 
    <p>The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.</p> 
 

 
    <h2><strong>CSS statements</strong></h2> 
 
    <p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p> 
 
    <p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.</p> 
 
    
 
</div> <!-- /wrap -->

Answer 1

行の高さは、段落の行間隔を制御するために使用されます。マージンはテキストのみを含む要素間で一般的に使用されます。これは、印刷で使用される標準的なタイポグラフィとあまり変わりません。

したがって、見出しの行の高さを設定し、その下に必要な余白の余白を調整します。他のコンポーネントと同じように。パラグラフ間のスペースはマージンです。ただし、段落の個々の行間のスペースは行の高さで制御されます。

このすべては、ページに垂直なリズムを設定するためにも使用できます。あなたはそれをGoogleに知らせるべきです。このため

一つの良いリファレンスはThe Elements of Typographic Style Applied to the Web

Answer 2

である私は、それは黒と白の問題だとは思いません。私はパディングの大ファンですが。あなたは本当に最高だと感じるものを使うべきです。

私にとってパディングが外を何間隔のための内側と余裕何間隔のためです。場合によっては、パディングがボックスモデルの寸法に問題を引き起こすことがあり、それ以外の場合は背景画像と衝突する可能性があります。一方、マージンはレイアウトを破る可能性があり、崩壊する可能性があります。

実際には、各プロパティがボックスモデルやフローにどのように影響し、どれが快適であるかを理解する必要があります。また、マージンが負の値を受け入れることに注意する価値はありますが、パディングは負の値を受け入れます。

レイアウトフローに影響を与えないスペースを追加したい場合は、配置することができます。

Answer 3

私は状況を絞りました：ヘッダーと段落を1つの背景に持つ統一テキストのセクションをフォーマットする必要があります。

コンテナ要素の境界線とテキストコンテンツの間のスペースについては、おそらくそのコンテナ要素にパディングを使用することをお勧めします。もちろん、内側の段落と見出し要素にも余白を使うことができますが、それは書式設定しなければならない2種類の要素になります。ですから、1つの要素に1回のパディングを設定するか、複数の要素に1つの余白を設定します。

段落と見出しの間の間隔は、余白がcollapseであるため、ここでは余白を使用することができます。

のは、h2は大きなフォントサイズを持っている（ので、多くの場合、それは、それは同様に、前/次の内容をより多くの距離を保つ必要があることを、活版印刷の観点から望ましいあなたは

h2 { margin-top: 15px; margin-bottom: 30px; } 
p { margin-top: 10px; margin-bottom: 10px; } 

を持っていたとしましょう）

HTMLの段落の後ろに段落の30pxの下余白と段落の10pxの上余白が残っているHTMLの段落に続けて、段落の30pxこれらの要素間の全体的な距離 - 同じ値を持つパディングは単純に加算され、yこれらの2つの要素の間に40ピクセルの距離があります。