Javascript 划线编码问题

我想在照片部分和文本部分之间画一条水平线作为分隔

这是我的网站：

下面是它工作的JSFIDLE：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（980,0）；
ctx.stroke（）；

我已经记在头上了。这是我的html：

<!-- CONTENT____________________________________________-->

<div class="content_wrapper">

<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

    <canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>
<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; ETC...
    </p>
    </div>

</div>

艾玛·卡迈克尔（Emma Carmichael）是纽约布鲁克林的一名作家和编辑，尽管她来自佛蒙特州的布拉特伯勒。艾玛于2010年毕业于瓦萨学院，获得城市研究学位；等

它显然在做一些事情，因为元素之间有额外的空间。有什么想法吗

---

谢谢大家!

这里有几点

您正在设置高度=100。这导致了额外的空间

如果您使用的是chrome，它会添加自己的样式。在这种情况下，下面的div“home\u text”有一个chromes适用的

p{ -之前的webkit保证金：1em； -webkit后的页边距：1em； -webkit保证金开始：0px； -webkit页边距结束：0px； }

最好在你的网站上使用reset.css或类似的东西

---

使用canvas创建分隔器可能不是最理想的方法。为什么不直接使用

并设置其

宽度

、

高度

和

背景色：黑色

var c=document.getElementById（“myCanvas”）正在返回未定义的对象

屏幕截图：


将此代码保留在行


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（980,0）；
ctx.stroke（）；

在关闭网页的body tag
之前，最好保留上面的脚本，
难道你不能只使用
元素吗？我试过了，但它是一个白色框，尽管我指定了黑色。它也有一个奇怪的边界。明白我的意思吗？我懂了。对于一条简单的线来说，这一切似乎相当复杂。如果我使用
标记，为什么它会在颜色周围创建奇怪的边框@Claire，
标签有一些隐含的样式。因为你左边的盒子是相邻的，你也可以给上面的盒子一个坚实的底边。。您不需要设置
高度：2px它只是一个分隔符。。同样，不同的浏览器对html元素有不同的本机样式。
<!-- CONTENT____________________________________________-->

<div class="content_wrapper">

<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

    <canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>
<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; ETC...
    </p>
    </div>

</div>

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>