CSS/Bootstrap/HTML - 带有底部边框和填充的 Div...如何防止在边距或填充上扩展边框？答案

【问题标题】：CSS/Bootstrap/HTML - Div with bottom border and padding...How to prevent extension of border on margin or padding?CSS/Bootstrap/HTML - 带有底部边框和填充的 Div...如何防止在边距或填充上扩展边框？
【发布时间】：2016-12-29 11:03:08
【问题描述】：

我有一个带有底部边框的 div，无论我尝试向左或向右填充，边框都会扩展为包含底部填充。

如何将边框限制为仅边框的最大长度，不包括填充或边距（左、右）？

CSS

div.row.banner div.links
     display: inline-block
     height: 40px
     margin: 0px
     border-bottom: 2px solid #5cdde0

div.row.banner div
     display: inline-block
     height: 25px

HTML

<div class="col-sm-4 nopadding pull-right">
    <div class="links pull-right">
        <div class="active pull-left"><a href="">Test Link 1</a></div>
        <div class="active pull-left margin-left"><a href="">Test Link 2</a></div>
        <div class="active pull-left margin-left"><a href="">Text Link 3</a></div>
    </div>
</div>

【问题讨论】：

您的问题不清楚，您提供的 CSS 似乎不适用于您提供的 HTML（而且格式也不正确）。
我会做必要的修改，感谢您的反馈。
我已经解决了这个问题，并将在下面发布我的 cmets。

标签： html css twitter-bootstrap

【解决方案1】：

好吧，边框问题是由于我将边框应用于每个锚标记 div 的封闭 div。

我在下面修改了原文

div.row.banner div.links
     display: inline-block
     height: 40px
     margin: 0px
     border-bottom: 2px solid #5cdde0

到下面

div.row.banner div.links
     display: inline-block
     height: 40px
     margin: 0px

div.links div.active
     border-bottom: 2px solid #5cdde0

从而使边框仅适用于内部 div 而不是容器。

【讨论】：