技术思绪摘录旅行笔记
今天写一个效果,其中用到Canvas,但是总有一个4像素在其中作怪,实在不知道啥原因,最后一搜索,发现有人和我一样,这里做个记录。

我目的是写个效果,其中用到了canvas画个动画,大致结构如下:

<body>
    <div>
        <canvas width="500" height="150"></canvas>
    </div>
</body>

最后发现div老是比canvas高出4像素,导致这个div下方留出4像素空白区域。

以至于加了如下样式也不行

        * {
            margin: 0px;
            padding: 0px;
        }

开始没在意,多出4像素,那么直接加一个负4像素来搞定。

div{
    margin-bottom:-4px;
}

但是我发现到其他浏览器之后,这负4像素又把下方的dom给挡住了,看来不是这么搞的。

面向百度编程一搜发现下方的文章:

https://segmentfault.com/q/1010000009638782

微信截图_20201121214812.png

主要原因如下:

image.png解决方案有两种方法:

canvas{
         display: block;
       }
div{
      font-size: 0;
    }


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

站点统计

总文章数:275 总分类数:18 总评论数:88 总浏览数:124.94万

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫