Question

我创建了以下jsFiddle来演示我的问题（或者更缺乏理解）

和代码

<div id="scoreboard"></div>
        <canvas id="game">
            Your browser does not support canvas.
        </canvas>
        <div id="controls">
            <button type="submit" id="newGame">New</button>
            <button type="submit" id="pause">Pause</button>
            <button type="submit" id="help">Help</button>
        </div>


#game {
    border: 1px solid #000000;
    background-color:#333333;
    width: 250px;
    margin:0px;    
}

#scoreboard {
    border: 1px solid #000000;
    background-color:#333333;
    color: orange;
    width: 250px;
    height: 40px;
    font:36px arial,sans-serif;
    text-align: right;;
}

#controls {
    margin-top: -5px;
    padding:0px;    
}

button {
    border: 1px solid #000000;
    margin-left:0px;

    background-color:#333333;
    color: orange;
    width:82px;
    height: 40px;
}

为什么带有“控件”的div需要-5px的上限以使其触及上方的画布？

占用5个像素的是什么？

什么阻止3个按钮彼此相邻而它们之间没有空格？

Answer 1

默认情况下，canvas元素是display：inline（或者是inline-block？），这意味着默认情况下底部有一个间隙，以便它与旁边任何文本的基线对齐。

您可以将画布设置为display: block或vertical-align: bottom。

来更改此设置

按钮的类似问题是显示：内联块，意味着它们之间有空格（因为单词之间有自然空间）。如所选答案中所述，删除空格是一种选择，但更优雅的解决方案如下：

#controls {word-spacing: -2em; display: table; width: 100%;}

button {word-spacing:0;}

Answer 2

＆＃34;为什么带有id＆＃34; div的div＆＃34;需要-5px的上限以使其触及上方的画布？＆＃34;

像ralph.m指出的那样，可以通过添加

来修复

canvas {
    display: block;  
}

＆＃34;什么阻止3个按钮彼此相邻而它们之间没有空格？＆＃34;

好吧，因为html代码中的按钮元素之间有空格（字符＆＃39;＆＃39;），当显示页面时，您将看到按钮之间的空格。您可以删除空格：

<button type="submit" id="newGame">New</button><button type="submit" id="pause">Pause</button><button type="submit" id="help">Help</button>

而不是

<button type="submit" id="newGame">New</button>
<button type="submit" id="pause">Pause</button>
<button type="submit" id="help">Help</button>

或者您可以尝试使用css样式修复它，例如将float: left;添加到按钮选择器。

Answer 3

回答Q1：Check this topic. 不同的浏览器有不同的算法，所以你应该为body css添加一些额外的参数。

body
{
   margin: 0; 
   padding: 0;
}

回答Q2：避免使用关闭按钮选项卡。没有必要，如果你删除它，按钮之间的边距将消失。 http://jsfiddle.net/gRCS6/5/

<button type="submit" class="button">New
<button type="submit" class="button">Pause
<button type="submit" class="button">Help

Answer 4

解决此问题的另一种方法是使用绝对定位来定义控件div的确切位置。然后你必须能够定义按钮的精确对齐，而不管显示：inline-block;或显示：块;命令。

http://jsfiddle.net/gRCS6/34/

#game {
border: 1px solid #000000;
background-color:#333333;
width: 250px;
height: 120px;
margin:0px;
position: absolute;
}
#scoreboard {
border: 1px solid #000000;
background-color:#333333;
color: orange;
width: 250px;
height: 40px;
font:36px arial,sans-serif;
text-align: right;
}
#controls {
position: absolute;
top: 172px;
margin-top:  0px;
padding: 0px;    
}
button {
border: 1px solid #000000;
margin:0px;
background-color:#333333;
color: orange;
width:81.5px;
height: 40px;
}

CSS布局 - 导致额外空间的原因

4 个答案: