html - 使色带附着的块看起来相同大小

我正在使用引导网格系统在我的页面上创建不同大小的“块”。其中一些需要丝带（例如“新”产品）。问题是，我创建色带的方式（我知道唯一的方法）意味着我必须包装块的内容并在框周围创建填充，这样色带可以“包装”它并创建所需的幻觉。
然而，这也意味着这些盒子比应该的要小一点，也就是说，我必须申请缎带的填充。
下面是它当前外观的演示：fiddleLink
CSS

.row {
    padding: 5px;
    background: #efefef;
}

.block {
    position: relative;
    padding: 5px;
}

.block-inner {
    background: #fcc;
    padding: 15px;
}

div.ribbon {
    z-index: 1;
    position: absolute;
    top: 2px;
    left: 0;
    width: 88px;
    height: 86px;
}

div#no-ribbon {
    background: #ccf;
}

div.ribbon-text {
    position: absolute;
    top: 25px;
    left: -15px;
    width: 100px;
    height: 20px;

    text-align: center;
    font-style: italic;
    font-size: 16px;
    color: white;

    transform: rotate(-45deg);
}

HTML格式

<div class="container">
    <div class="row">
        <div class="col-xs-3 block">
            <div class="ribbon">
                <div class="ribbon-text">New!</div>
            </div>
            <div class="block-inner">
                <p>Some awesome text and imagery, whatever</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3" id="no-ribbon">
            <p>A block with its "actual" size</p>
        </div>
    </div>
</div>

截图
如您所见，可见的左边框未对齐。当然，从技术上讲，这是非常合乎逻辑的。但是，从用户的角度来看，它只是看起来“关闭”。
我怎样才能做到这一点，使带色带的块的左边框与不带色带的块的左边框对齐？

最佳答案

更新和工作
尝试margin-left: -5px;到块。

.block-inner {
    background: #fcc;
    padding: 15px;
    /* Add this */
    margin-left: -5px;
}

div.ribbon {
    margin-left: -5px;
}

div.ribbon + .block-inner {
    margin-right: -5px;
}

预览：
小提琴：https://jsfiddle.net/kpopsj5x/5/

关于html - 使色带附着的块看起来相同大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31206611/