Question

我试图让div名为touch-container来举行canvas，其中包含3个div。我也在使用javascript调整它们的大小。

问题是3个div中的每一个都有一个margin占据容器中的其余空间，即使我明确指出0 margin。< / p>

这是一个jsFiddle，如果你检查，你可以看到margin Jsfiddle

HTML ：

<div id = "touch-container">
    <div id = "touch-left" class = "touch-control"></div>
    <div id = "touch-middle" class = "touch-control"></div>
    <div id = "touch-right" class = "touch-control"></div>
    <canvas id = "canvas" width = "960" height = "560"></canvas>
</div>

CSS ：

body {
  margin: 0;
}

#touch-container{
  width: 964px;
  height: 560px;
  display: inline-block;
  margin: 0;
}

.touch-control{
  position: relative;
  margin: 0;
}

#touch-left{
  background-color: red;
}

#touch-middle{
  background-color: green;
}

#touch-right{
  background-color: blue;
}

JS ：

var leftTouch = document.getElementById('touch-left');
var upTouch = document.getElementById('touch-middle');
var rightTouch = document.getElementById('touch-right');

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

var width = (canvas.width > canvas.height ? canvas.width : canvas.height);
var height = (canvas.height > canvas.width ? canvas.width : canvas.height);

leftTouch.style.width = (width/ 4) + 'px';
leftTouch.style.height = height + 'px';

upTouch.style.width = (width/ 2) + 'px';
upTouch.style.height = height + 'px';

rightTouch.style.width = (width/ 4) + 'px';
rightTouch.style.height = height + 'px';

ctx.fillRect(0,0,canvas.width, canvas.height);

我已将它们着色，因此它应该是底部上的黑色方块，然后从左到右，一个红色，绿色和蓝色方块分别占用容器的25%, 50% 25%，因此您甚至无法看到黑色canvas。

Answer 1

您没有在元素（正方形）中添加任何float，因此正方形不知道它们应该如何定位，您最常使用float:left;强制正方形位于同一行并且display:inline-block;不适用于您的情况（它只适用于文本）：

Jsfiddle

<强> CSS ：

#touch-container{
    width: 964px;
    height: 560px;
    display: block;/* new update */
    margin: 0;
}

#touch-left{
    background-color: red;
    float:left;/* new update from here to below */
    display:block;
}

#touch-middle{
    background-color: green;
    float:left;/* new update from here to below */
    display:block;
}

#touch-right{
    background-color: blue;
    float:left;/* new update from here to below */
    display:block;
}

Answer 2

边距是指块和内联块级元素之间的间距。由于div是块元素，它们堆叠在一起，而margin：0删除它们之间的任何空格。

如果要将div放在canvas元素的顶部，可以通过绝对定位实现。

.touch-control {
    position: absolute;
    top: 0;
}

然后你可以使用你的javascript将每个div的'left'属性设置到你想要的位置，或者用css单独定位它们。

当我为div和body设置保证金为0时，div有边距

2 个答案: