Inline height and width on div not applying, while it does on canvas-CodePudding

 #mycanvas {
        box-sizing: border-box;
        position : relative;
        top: 100;
        left: 0;
    }
    
    #base_map {
        box-sizing: border-box;
        position : relative;
        top: 100;
        left: 0; 
    }

<h1>hello world</h1>
<canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
<div id = "base_map"  width="850" height="250" style="border: 1px solid #000000;"></div>

The result is the webpage can show the border of mycanvas and base_map, but the shape of base_map is not correct.

I don't why since the attributes of canvas and div are the same in the css file.

CodePudding user response：

While