Question

我认为主要的问题是我对填充，边框和边距的相互作用感到困惑。

我已经自己阅读了这些样式属性，但是我很难在表格中成功地将所有这些属性组合起来。

首先，我在单元格中的内容上设置属性，然后在单元格上设置属性。我不知道什么时候该做。

对于两个，我可以使用百分比或像素。根据我的需要，我认为百分比可以正常工作，因为橙色框中的文本将具有可变长度（标题文本也是如此）。

现在，我无法正常工作的代码部分是display：inline-block元素（包括填充，边框和边距）溢出单元格。显然我希望第一个标题集中在下面的内容上，我希望每个橙色按钮在视觉上居中，它们之间有一个小的边距，右边的单元格。

我看到有一个盒子大小的样式解决方案，但我需要它与IE6兼容。

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

细胞内容溢出边缘，填充和边框

1 个答案: