CODEWITHSUNDEEP
cssbuttonseparator
user1491636
user1491636

Reputation: 2436

Button with vertical separator css

I'm trying to add a vertical separator between an icon and some text on a button, but it is just pushing everything down. Why is that?

.btn {
      height: 22px;
      border: 1px solid #B9B9B9;
      font-weight: normal;
      font-size: 11px;
      color: #003E7E;
      text-align: left;
      line-height: 12px;
      width: 200px;
    }
    .separator {
      content: '';
      display: inline-block;
      background: #888;
      margin: 0px 4px;
      height: 18px;
      width: 1px;
    }
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">
  <span class="icon-plus"></span>
  <span class="separator"></span>
  ABC0102165
</button>

Upvotes: 3

Views: 7298

Answers (2)

Blue
Blue

Reputation: 463

You're pulling padding for the button from bootstrap. That padding is pushing the content down, and since you have a fixed height on your button it's getting clipped. As was suggested you can reset the padding, or just remove the fixed height on your button. Also as a general suggestion unless you specifically are overriding bootstrap do not reuse their class names. I would recommend using some kind of namespace like [myApp]-[button].

Upvotes: 0

Carlos Man
Carlos Man

Reputation: 368

I would add "padding-top: 0px !important;" to .btn, and "vertical-align: top;" to .separator.

.btn {
      height: 22px;
      border: 1px solid #B9B9B9;
      font-weight: normal;
      font-size: 11px;
      color: #003E7E;
      text-align: left;
      line-height: 12px;
      width: 200px;
      padding-top: 0px !important;
    }
    .separator {
      content: '';
      display: inline-block;
      background: #888;
      margin: 0px 4px;
      height: 18px;
      width: 1px;
      vertical-align: top;
    }
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">
  <span class="icon-plus"></span>
  <span class="separator"></span>
  ABC0102165
</button>

Upvotes: 7

Related Questions