フッターのテキストの詰め込みが上部にスティックされます

Question

私はここで何が問題なのかよく分かりませんが、かなりシンプルな状況ですが、動作させることはできません。だから私は単にフッターのコンテンツの位置を垂直方向に操作したいと思っていますが、それはその上に固執し続けます。パディング、余白、何も助けません...なぜですか？あなたは、高さを追加し、フッターに1つだけのラインを持っている場合は50とピクセル

.footer{ 
 
\t background-color: #333; 
 
\t text-align: center; 
 
} 
 

 
.imprint p{ 
 
\t color: #fff; 
 
\t padding: 15px; 
 
}

<footer class="footer"> 
 
     <div class="imprint"> 
 
     <p>&copy; 2017 Bike Berlin</p> 
 
     </div> 
 
    </footer>

Answer 1

line-height: 50pxを使用できます。 これは、行の高さをフッターの高さにするので、テキストは中央になります。

.footer { 
 
    background-color: #333; 
 
    text-align: center; 
 
    line-height: 50px; 
 
} 
 

 
.imprint p { 
 
    color: #fff; 
 
}

<footer class="footer"> 
 
    <div class="imprint"> 
 
    <p>&copy; 2017 Bike Berlin</p> 
 
    </div> 
 
</footer>

Answer 2

の間にスペースを削除する必要がいけない

.footer{ 
 
\t background-color: #333; 
 
\t height: 50px; 
 
\t text-align: center; 
 
} 
 

 
.imprint p{ 
 
\t color: #fff; 
 
\t padding: 50 px; 
 
}

<footer class="footer"> 
 
     <div class="imprint"> 
 
     <p>&copy; 2017 Bike Berlin</p> 
 
     </div> 
 
    </footer>

Answer 3

フッターを参照しながらfooterタグを使用しないでください。あなたはそれを調整するクラスがあります。これは通常の動作です（少なくともブラウザの実装間で）。親がパディングを持たない限り、マージンは親に対する子の位置に影響を与えません。その場合、ほとんどのブラウザは親のパディングに子のマージンを追加します。

.footer{ 
background-color: #333; 
height: 50px; 
text-align: center; 

} 

.imprint p{ 
color: #fff; 
padding-top:15px; 
} 

そしてdivにフッターを変更します：

<div class="footer"> 
    <div class="imprint"> 
    <p class="para">&copy; 2017 Bike Berlin</p> 
    </div> 
</div> 

Answer 4

heightプロパティを削除し、代わりに.imprint pためpaddingを使用 それ作品があり、これを使用してみてください。あなたはコンテナの上端と下端に等しい量のスペースを加えなければなりません。

Answer 5

パディング値を15pxに変更するだけで問題を解決します。

.footer{ 
    background-color: #333; 
    height: 50px; 
    text-align: center; 
     } 
.imprint p{ 
    color: #fff; 
    padding: 15px; 
    }