12

以下のコードでは、h1 要素にトップ マージンを設定しようとしています。css で位置をインラインに設定すると、margin-top が表示されません。しかし、インラインブロックに変更すると、そうです。誰かがなぜこれが当てはまるのか説明できるかどうか疑問に思っています。ありがとう。

編集: 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;
}
4

3 に答える 3

17

CSS2 仕様のセクション 9.2.4には、次のように記載されています。

inline-block
この値により、要素はインライン レベルのブロック コンテナーを生成します。インライン ブロックの内部はブロック ボックスとしてフォーマットされ、要素自体はアトミック インライン レベル ボックスとしてフォーマットされます。

inline
この値により、要素は 1 つ以上のインライン ボックスを生成します。

さらに CSS2 仕様 (セクション 9.4.2 ) では、インライン要素は水平マージンのみを尊重すると言われています (証明):

インライン フォーマッティング コンテキストでは、ボックスは包含ブロックの上部から順に水平方向に配置されます。これらのボックスの間では、水平マージン、境界線、およびパディングが考慮されます。

inlineとの違いinline-blockは、inline要素がインラインとして扱われるのに対し、inline-block要素は効果的にブロックとして扱われることです (互いに視覚的にインライン化されています)。

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

于 2013-10-03T07:56:24.640 に答える
5

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

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

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

参考：w3schools

于 2013-10-03T07:50:47.770 に答える
2

マージンを持つことができるのは、ブロック レベルの要素だけです。'display: inline;' を指定します。（当然のことながら）強制的にインライン要素になるため、マージンが失われます。

他のコンテンツとインラインで維持し、マージンを活用したい場合は、インライン ブロックを使用してみてください。. .

于 2013-10-03T07:50:30.577 に答える