css - 要素にパディングを与えると、全体の幅が増加します

Question

40pxdiv があり、テキストを左からインデントしたいと考えています。そのために、私は書きます

#rightheader{
    float: right;
    width: 70%;   
    height: 120px;
    background-color: #336699;
    padding-top: 20px; 
}

さて、混乱はpadding-left: 40px;、上記に追加するたびに、divの合計幅も増加することです。ではないpadding euivalent to internal indentation.

ところで、div 幅を変更せずにテキストをインデントするにはどうすればよいですか??

score 2 · Accepted Answer

をご覧になりたいと思いますbox-sizing: border-box。

padding:ボックスの幅の内側で計算されます。

CSS Box Modelについてもお読みください。

score 1 · Accepted Answer

#rightheader{
    float: right;
    width: 70%;   
    height: 120px;
    background-color: #336699;
    padding-top: 20px;
    text-indent: 40px;
}

2 に答える 2