我如何才能创建一个好的、简单的、易于记忆的底部边界

Question

我正在尝试使用底部边界，但它没有按我的意愿工作。当我创建边界时，边界下面有一条细线，它仍然是背景。我该怎么解决这个问题？

HTML:

<div class="bottomborder"></div>

CSS:

.bottomborder {
    background-color: black;
    width: auto;
    height: auto;
    height: 20px;
    margin-left: -20px;
    margin-right: -20px;
}

Answer 1

您到底想要什么？

您的信息和代码仍然不够。请参阅此演示

   .bottomborder
{
    background-color: black;
    width: auto;
    height: auto;
    height: 20px;
    margin-left: -20px;
    margin-right: -20px;
    border-bottom:2px solid red;
}

<div class="bottomborder"></div>

注意：您没有正确关闭<div>

Answer 2

使用inspecting element可以轻松完成。也是拉瓦特建议的方式。

看看这里：-

<div class="bottomborder" id="div1"></div>

CSS：-

.bottomborder {
        background-color: black;
        width: auto;
        height: auto;
        height: 20px;
        margin-left: -30px;
        margin-right: -30px;
        border-bottom: 2px solid green;
    }

请参阅此处的工作演示

希望它能帮助

Answer 3

只需使用边框而不是背景色，如下所示：

HTML:

<div class="bottomborder"></div>

CSS：

.bottomborder {
    background-color: none;
    width: auto;
    margin-left: -20px;
    margin-right: -20px;
    border-bottom: 20px solid #000;
}

请注意，您在div上指定了20px和auto的两个高度属性。