私は次のマークアップを持っています
<a class="block"><span class="inline">hello</span>world</a>
the <a>has a display:block... span.inline a を指定するmargin-top:3pxと、その後のテキストも押し下げられます。これは、この動作を確認するための jsfiddle です。
なぜこれが起こっているのか、誰かが私にヒントを与えることができますか?
2 に答える
2
行のすべてのinline要素は同じ行の高さを共有します。考えてみれば理にかなっている。それ以外の場合、複数行のテキストがある場合はどうなりますか? まったく読めなくなってしまいます。
このような状況では、vertical-align属性を使用する必要があります。それを読んで、あなたは大丈夫なはずです。
于 2012-11-02T13:53:38.333 に答える
1
margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.
understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align
于 2012-11-02T13:53:16.500 に答える