0
短信質問：下の最初のリンクをクリックして、右に余白が表示される理由を教えてください。相対配置ブロックに存在しない右マージンが表示される
ロング質問：
私はGoogle Chromeは絶対的および相対的位置付けのブロックは異なるグラフィカルな表現を示している理由を理解したいと思います。
絶対配置されたブロックでは、Chromeは予想通りに要素を表示します。
相対配置ブロックでは、要素の幅がさらに何かを示します。マージンやパディングのように見えますが、このdivの余白と余白をゼロにしていますが、Chrome Inspectツールでも同じように見えます。
相対divがその幅に対してどのように「拡張」しているかを見てください。
inspected relative div screenshot
そしてここで、絶対divが、この "拡張機能" を持っていません。
inspected absolute div screenshot
そして、ここではこれを証明することができるコードです。
.wrapper {
border: solid 1px red;
display: block;
width: 300px;
position: relative;
height: 150px;
}
.absolute-class, .relative-class {
display: block;
width: 100px;
left: 20px;
font-size: 24px;
}
.absolute-class {
position: absolute;
top: 10px;
}
.relative-class {
position: relative;
top: 30px;
}<body>
<div class="wrapper">
<div class="absolute-class">Text 1</div>
<div class="relative-class">Text 2</div>
</div>
</body>私はこの余分な「余裕」は、私が開発していますページ上の水平方向のスクロールを引き起こしていると思うので、私は、このことについて心配しています。ですから、私はこの問題を解決できるように、これが何であるかを理解したいと思います。
で
display: inline-block;を使用することができます使用します「マージン」が水平スクロールを引き起こしている私が開発しているページでは、ラッパーdivのために 'overflow：auto'を設定していますが、相対位置要素が実際にそれまで伸びていればスクロールバーが表示されますが、そうではありません。あなたが解決しようとしている、おそらくこのコードに反映されていません。 – CBroeオートマージンのようです。ラッパーdivを調べると、同様の仮想マージンが確認できます。実際には奇妙なのは、幅の横にある相対配置されたdivに左マージンを指定すると、Chromeはこの自動右マージンを再計算しないことです。左マージンが自動であるかのように自動右マージンを計算します左側）を指定すると同時に、指定した左余白を表示します。私はChromeがこれをやっている理由を知っていませんが、Chromeですから、このような奇妙な事実を引っ張っているのは驚きではありません。 – BoltClock
@CBroeはい、そうです。私はあなたが言ったことを行うことによってスクロールを再現しようとしました、そして、本当にスクロールを表示しませんでした。しかし、私の実際のプロジェクトでは、スクロールに影響します。私はちょうどここにそれを持って来るのに十分な問題を分離しなかった。だから私はちょうどここに来て、このファントムマージンが何であるか尋ねる。 –