jquery - 使子元素的边框与父元素的边框重叠的更好方法

Question

我正在做一个元素，需要在 CSS 的帮助下实现这种效果:

下面是我想要实现的目标的描述:

父元素(title)在底部有一些内边距和 2px 边框。它还有一个子项 (title-inner)，它也有一些填充和 2px 边框，但颜色不同，并且它与父项的边框重叠，即 title .

我正在使用这个标记结构:

<div class="title">
    <div class="title-inner">Widget title</div>
</div>

我知道可以通过对这两个元素的填充和边距属性进行一些调整来实现，但是到目前为止我编写的 CSS 在移动设备上或在调整浏览器大小时会有些中断(看看 this fiddle ).

有没有更好的方法在 CSS 中实现这种效果？有什么想法吗？

Answer 1

与其为子元素和父元素都提供 padding，不如为子元素提供 padding，然后添加一个负的 margin 来制作边框相互重叠。

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}

.title {
    border-bottom: 2px solid;
}

.title-inner {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 16px;
    margin-bottom: -2px;
    border-bottom: 2px solid #E64998;
}

<div class="title">
    <span class="title-inner">Lorem Ipsum</span>
</div>