セルの内容がマージン、パディング、ボーダーであふれている

Question

主な問題は、パディング、境界線、マージンのやり取りについて混乱していると思います。

私はこれらのスタイル属性をそれぞれ独自に読みましたが、それらをすべてテーブル内でうまく組み合わせるには問題があります。

1つは、セル内のコンテンツに属性を設定してから、セル自体に属性を設定します。私はいつ行うのか分からない。

2つの場合、％またはピクセルを使用できます。私の必要性については、オレンジ色のボックスのテキストが可変長であるため（ヘッダーテキストと同じように）、パーセントがうまくいくと思います。

ここで、私が正しく動作することができないコードの部分は、display：inline-block要素（パディング、ボーダー、およびマージンを含む）がセルをオーバーフローすることです。明らかに、私は最初のヘッダーを下の内容の中央に置いて、それぞれのオレンジ色のボタンを視覚的に中央に置き、それらのセルと右のセルの間の小さなマージンにしたいと思います。

ボックスサイズのスタイルのソリューションがありますが、IE6との互換性が必要です。

http://codepen.io/kokeefe/pen/dMmPMp

a.TableButtonStyle:link { 
    display: inline-block; 
    border-style: solid; 
    border-width: 3px; 
    border-color:rgb(240,80,40); 
    border-radius: 10px; 
    vertical-align: middle; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    color: white; 
    text-decoration:none; 
    background-color: rgb(240,80,40); 
    font-weight: bold; 
    width: 100%; 
    padding: 5%; 
    font-size:14pt; 

} 
a.TableButtonStyle:hover { 
     background-color: white; 
     color: rgb(240,80,40); 
} 
a.TableButtonStyle:active { 
     background-color: rgb(213, 57, 15); 
     color: white; 
    border-style: solid; 
    border-width: 3px; 
    border-color: rgb(213, 57, 15); 
} 
a.TableButtonStyle:visited { 
     background-color: rgb(213, 57, 15); 
     color: white; 
    border-style: solid; 
    border-width: 3px; 
    border-color: rgb(213, 57, 15); 
} 

.FontFormat{ 
    text-align:center; 
    vertical-align:middle; 
    font-size: 13pt; 
    margin: 5px; 
} 
.Bold 
{ 
    font-weight: bold; 
} 

Answer 1

Updated CodePen

あなたは必要なものです：

box-sizing: border-box; 

がa.TableButtonStyleにこれを適用します。 from MDN docsを引用

：

ボーダーボックス： 幅と高さのプロパティは、パディングとボーダーではなく、マージンが含まれています。これは、ドキュメントがQuirksモードのときにInternet Explorerで使用されるボックスモデルです。パディングとボーダーはボックスの内側にあることに注意してください。 .box {width：350px; border：10px solid black;}は幅350pxのブラウザでレンダリングされたボックスにつながります。コンテンツボックスは負であってはならず、0にフロアされているため、ボーダーボックスを使用して要素を消滅させることはできません。

CSS box-sizing property MDN docs