前後のCSS疑似クラスを使用

Question

私は前後にCSS疑似クラスを試してみました。私はヘッダ要素を作成するためにそれらの擬似を使用しようとしました。これは左と右の画像を保持するdivを減らすことです。これは、だから私は100pxに高さと左右のサイド用と中間、1ピクセル幅と水平に繰り返されます100pxに高さ20ピクセル幅のある伝統的なヘッダ要素を作成するために、3枚の画像を持っているHTML

<header id="mastHead"> 
     <h1><a href="#">Branding</a></h1> 
    </header> 

ためのコードです。そして、ここに私のCSS

#mastHead { 
     background:url(images/headMiddle.jpg) repeat-x top left; 
     width:1000px; 
     height:100px; 
     overflow:hidden; 
    } 

    #mastHead:before { 
     content:""; 
     display:block; 
     background:url(images/headLeft.jpg) no-repeat top left; 
     width:20px; 
     height:100px; 
     float:left; 
    } 

    #mastHead:after { 
     content:""; 
     display:block; 
     background:url(images/headRight.jpg) no-repeat top left; 
     width:20px; 
     height:100px; 
     float:right; 
    } 

    #mastHead h1 a { 
     display:block; 
     width:200px; 
     height:41px; 
     background:url(images/logo.png) no-repeat; 
    } 

だから問題は、私は、H1要素を削除した場合、それは完璧に揃えますが、私はこれらの要素を入れた場合、それがダウンして擬似クラスの後に::をプッシュし、それは応じて残りのスペースを取るですそれは高さです。どのように私はこのスペース要素に影響を与えずにちょうど中間空間を取るためにh1要素を作ることができますか？

Answer 1

私はあなたの例でバイオリンを作っ：http://jsfiddle.net/3Dcw3/（のみフィドルに合わせて500の幅を設定し、それらを視覚化するための背景を設定）

そして、ここでは固定バージョンです：http://jsfiddle.net/3Dcw3/1/

ポイントされています：

1. position:relative;をヘッダーに追加します。
2. フローティングではなく絶対配置を使用します。
3. ブロックがそれらの上に置かれるようにパディングを追加します。