Home>

Writing a canvas in HTML and placing a button next to it creates a useless margin below the button size, but I want to eliminate this margin. Please answer if you know how.

HTML
<html>
<head>
<title></title>
</head>
<body>
<link rel = "stylesheet" type = "text/css" href = "sample.css">
<div>
<canvas width = "500" height = "500"></canvas><br>
<input type = "button" />
<input type = "button" />
</div>
</body>
</html>
CSS
body {
    background: #eee;
}
#canvas {
    margin: 0px;
    background: #ffffff;
    border: 1px solid #aaaaaa;
    padding :: 0px;
}
input [type = "image"] {
    padding: 0px;
    outline: none;
}
# b1 {
    position: relative;
    top: -600px;
    left: -39px;
    width: 40px;
    height: 500px;
    margin: 0px;
}
# b2 {
    position: relative;
    top: -600px;
    left: 450px;
    width: 40px;
    height: 500px;
    margin: 0px;
}
If i set the height of the

button to 50px, there will be no margin below, but if you set it to 500px, a margin will be created below.

The margin is the part indicated by the red line in the image

  • Answer # 1

    An element with

    position: relativewill leave a blank at the original position when the position is shifted.
    (That's why height is born)

    Ifposition: relative;is specified for the parent element andposition: absolute;is specified for the child element,
    Child element determinestop,left,right,bottombased on the parent element

    After that, describe thelinktag in theheadtag, and arrange the HTML indentation

    By using*(generic selector), you can perform simple CSS normalization

    Based on the above, I made the following code

    <html>
      <head>
        <title></title>
        <link rel = "stylesheet" type = "text/css" href = "sample.css">
      </head>
      <body>
        <div id = "w">
          <canvas id = "canvas" width = "500" height = "500"></canvas><!-<br>← No need->
          <input type = "button" id = "b1" />
          <input type = "button" id = "b2" />
        </div>
      </body>
    </html>
    body {
        background: #eee;
    }
    * {/ * added * /
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    #w {/ * added * /
        position: relative;
        margin: 50px auto;
        width: 500px;
    }
    #canvas {
        / * margin: 0px;* /
        background: #ffffff;
        border: 1px solid #aaaaaa;
        / * padding: 0px;* /
    }
    input [type = "image"] {
        / * padding: 0px;* /
        outline: none;
    }
    # b1 {
        position:/* relative */absolute;
        top:/*-600px */2px;
        left: -39px;
        width: 40px;
        height: 500px;
        / * margin: 0px;* /
    }
    # b2 {
        position:/* relative */absolute;
        top:/*-600px */2px;
        left:/* 450px */502px;
        width: 40px;
        height: 500px;
        / * margin: 0px;* /
    }