Html - Div Table - 背景颜色不适用于边距，填充，边框答案

【问题标题】：Html - Div Table - The background colors not working with margins, padding, borderHtml - Div Table - 背景颜色不适用于边距，填充，边框
【发布时间】：2013-10-24 18:47:19
【问题描述】：

通过显示一个 jsfiddle 最容易问这个问题。

http://jsfiddle.net/jaa17/E8Skp/

<body style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#999999">
    <p>I want the red/green of the table's/row's background showing through on the left and the right, not the body's background grey. (Note the 10 pixel padding in the table's row/column.)</p>
    <p>And what has happened to the padding on the right? That needs to be red/green too.</p>
    <p>And these blue sections should be on the same line.</p>
    <p>What do I use, margins, borders, padding???? Nothing seems to work.</p>
    <div style="width:100%; height: 100%;">
        <!-- A Div Table -->
        <div style="text-align: center; width: 100%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 0px; padding-right: 0px;       background-color: #FF0000;">
            <!-- Row -->
            <div style="text-align: center; width: 100%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #00FF00;">
                <!-- Column -->
                <div style="float: left; width: 50%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #0000FF;">
                    <button type="button">Some Html Stuff</button>
                </div>
                <!-- Column -->
                <div style="float: left; width: 50%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #9999FF;">
                    <button type="button">Some Html Stuff</button>
                </div>
            </div>
        </div>
    </div>
</body>

我希望表格/行背景的红色/绿色显示在左侧和右侧，而不是正文的背景灰色。（请注意表格行/列中的 10 像素填充。）

右边的填充发生了什么？那也需要是红色/绿色的。

这些蓝色部分应该在同一行。

我应该使用什么，边距、边框、内边距？似乎没有任何效果。

【问题讨论】：

标签： html margin padding css-tables

【解决方案1】：

最古怪的答案，但它有效。我的 jsfiddle 上提供的问题和解决方案：http://jsfiddle.net/jaa17/E8Skp/

作为容器的 Div 认为自己的高度为零，因此不显示颜色。为了愚弄他们，您必须在 CONTAINER div 的样式上放置一个溢出：隐藏或浮动：左。（注意该列需要一个 float:left 是因为它在表格中的位置，而不是由于这个 container-div 问题。）这里给出了更好的解释：

http://netweaver.com.au/floatHouse/

另外，列未出现在同一行的问题是由于需要将填充宽度从 100% 宽度中取出，因此我对所有浏览器都使用了 calc 函数。

<!-- A Div Table -->
<div style="overflow: hidden; text-align: center; width: 100%; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #FF0000;">
    <!-- Row -->
    <div style="overflow: hidden; text-align: center; width: 100%; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px);display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #00FF00;">
        <!-- Column -->
        <div style="float: left; width: 50%; width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px);display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #0000FF;">
            <button type="button">Some Html Stuff</button>
        </div>
        <!-- Column -->
        <div style="float: left; width: 50%; width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px); display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #9999FF;">
            <button type="button">Some Html Stuff</button>
        </div>
    </div>
</div>

【讨论】：