なぜマージントップはインラインブロックで動作しますが、インラインでは動作しませんか？

以下のコードでは、h1要素の先頭に余白を持たせようとしています。私がCSSでインラインに位置を設定すると、マージントップが表示されません。しかし、私はそれをインラインブロックに変更すると、それはします。私は誰かがなぜこれが理由であるか説明できるかどうか疑問に思います。ありがとう。なぜマージントップはインラインブロックで動作しますが、インラインでは動作しませんか？

編集：ここではjsfiddleのコードがあります：http://jsfiddle.net/pjPdE/

は、ここに私のHTMLです：

<!DOCTYPE html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css"> 
    <title> 
     Max Pleaner's First Website 
    </title> 
    </head> 
    <body> 
    <h1>Welcome to my site.</h1> 
    </body> 
</html>

そしてここでは、CSS

body { 
    background-image:url('sharks.jpg'); 
    } 

h1 { 
    background-color:#1C0245; 
    display:inline; 
    padding: 6.5px 7.6px; 
    margin-left:100px; 
    margin-top:25px; 
}

出典

2013-10-03 macsplean

Section 9.2.4：

インラインブロック
この値はインラインレベルのブロックコンテナを生成する要素を引き起こし。インラインブロックの内部はブロックボックスとしてフォーマットされ、要素自体は原子レベルのインラインレベルのボックスとしてフォーマットされます。

インライン
この値は、一つ以上のインラインボックスを生成する要素を引き起こします。コンテキストをフォーマットインラインで

、ボックスは、水平方向に次々にレイアウトされている：我々は、インライン要素のみ水平マージン（proof）を尊重すると言われ得るさらなるでCSS2仕様（section 9.4.2）に

その他、包含ブロックの先頭から始まります。水平マージン、境界線、およびパディングは、これらのボックスの間で尊重されます。

inlineとinline-blockの差がinline-block要素が効果的に（互いに視覚的にインラインである）のブロックとして扱われる一方inline要素は、インラインとして扱われることです。

ブロックレベルの要素は水平と垂直の両方のマージンを考慮しますが、インラインレベルの要素は水平マージンのみを考慮します。

出典

2013-10-03 07:56:24

のみブロックレベル要素は余裕を持つことができます。これに 'display：inline;それを（驚くことなく）のインライン要素に強制し、余白を失います。

インラインブロックを使用して、のインラインブロックを他のコンテンツと一緒に保存し、余白を活用してみてください。。。

出典

2013-10-03 07:50:30

<h1>タグは、デフォルトではブロック要素で、余白を許可します。 display: inlineを使用すると、マージンを許可しないスパンタグなどのインライン要素になります。

display: inline-blockを使用すると、両方の要素の両方の機能を使用できます。

要素をインラインレベルのブロックコンテナとして表示します。の内部は、このブロックは、ブロックレベルボックスとしてフォーマット、および要素自体は、インラインレベルボックス

参考としてフォーマットである：CSS2仕様状態のw3schools

出典

2013-10-03 07:50:47 Safinn

浮動すると役立ちます。 –

なぜマージントップはインラインブロックで動作しますが、インラインでは動作しませんか？

答えて

関連する問題