0
次の動作についての説明を探しています。スパン要素が（0.25 xフォント高さ）ピクセルだけ右にドリフトします
私はの要素を持つ<div>コンテナを持っています。最初と3番目の要素は化粧品です。その目的はブラウザウィンドウの幅を異なる背景色で塗りつぶすことです。これは、エレメントの水平パディングとマージンを調整することによって実現されます。
第2および第3の<span>要素の間に望ましくない隙間があります。私は、ギャップの幅が親の<div>要素に設定されたフォントサイズのちょうど四分の一であると判断しました。
私の解決方法は、3番目の<span>要素に負のマージンを追加することです。次のコードスニペットでは、問題とその問題に対する私の解決策を示しています。
http://codepen.io/danag/pen/RKZQxE
誰かが私に行動の理由を説明できますか？
このレイアウトの問題については、より良い解決策を学ぶこともできます。
body {
margin : 0;
padding: 0;
overflow-x: hidden;
}
h2 {
font-size: 32px;
}
.bg-blue {
background-color: #1111ee;
}
.bg-red {
background-color: #ee1111;
}
#my-container {
background-color: #ffffff;
}
#my-content,
#my-content-too {
width: 80%;
margin: auto;
background-color: #ffffe0;
padding: 1.5em;
}
.heading-wrapper {
display: inline;
font-size: 100px;
line-height: 1.2;
background-color: #ffff00;
}
.heading-wrapper .heading {
display: inline;
text-transform: uppercase;
background-color: #eee;
}
.heading h2 {
display: inline;
padding-left: 0.3em;
padding-right: 0.3em;
}
.extend-left {
margin-left: -2000px;
margin-right: 0;
padding-left: 2000px;
padding-right: 0;
}
.extend-right {
margin-left: 0;
margin-right: -2000px;
padding-left: 0;
padding-right: 2000px;
}
.left-25 {
margin-left: -25px;
}<div id="my-container">
<div id="my-content">
<div class="heading-wrapper">
<span class="extend-left bg-blue"></span>
<span class="heading"><h2>Heading Text</h2></span>
<span class="extend-right bg-red"></span>
</div>
<div class="text-wrapper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
<div id="my-content-too">
<div class="heading-wrapper">
<span class="extend-left bg-blue"></span>
<span class="heading"><h2>Heading Too</h2></span>
<span class="extend-right bg-red left-25"></span>
</div>
<div class="text-wrapper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
</div>
私はあなたがこれを複雑にしてしまったと思いますが、そこに空白文字があるという理由があります。この問題を最小限にするには、font-sizeを0に設定してから、子供に設定し直します。しかし、 'position：relative'と'：before'と '：after'を' position：absolute'と 'height：100％'で 'h2'した方が良いかもしれません。表示されます...これは多くのDOMノードのような面倒なような感じ... – somethinghere
ありがとう。私は空白問題を完全に忘れてしまった。あなたが答えとしてあなたのコメントを追加したいなら、私はそれを受け入れるでしょう。 –