CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user2454455
user2454455

Reputation:

Element not inlined properly with padding:0

The button with text "Project Howto" is supposed to be inlined with the button with text "Sign In or Register"

I remove the padding padding:0 already but when i inspect it.. padding still appears

<div class="btn-group input-group-btn" style="padding:0;">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style="margin:0px;">
  Project HowTo:
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Dropdown link</a></li>
     <li><a href="#">Dropdown link</a></li>
  </ul>
</div>

http://codepen.io/anon/pen/hjAGo

Upvotes: 0

Views: 59

Answers (3)

Shyam
Shyam

Reputation: 792

I tried this, and it worked. Added inline style for padding 0.

<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style="margin:0px;padding:0;">
              Project HowTo:
              <span class="caret"></span>
            </button>

Upvotes: 0

Akaryatrh
Akaryatrh

Reputation: 531

The padding musn't be removed on <div> btn-group input-group-btn but on child <button> btn btn-default btn-lg dropdown-toggle. Then, your padding is removed.

But it still won't be the same height because :

  • The font size is different
  • You have two elements in your second button

The only way to force these buttons to share the same height is to give them a specific one :

btn-group.input-group-btn button {
  height: 50px;
}

Demo : http://codepen.io/anon/pen/ByIwl

Upvotes: 1

Ravimallya
Ravimallya

Reputation: 6610

Since the Project HowTo: button has the padding, the button group is giving padding.

Set the following css to btn btn-default dropdown-toggle element:

  .input-group-btn:last-child>.btn {
  padding: 1.5px 4px;
  line-height: 1.45;
  }

You can give inline style or add a custom class for that element with the given style to override.

Upvotes: 0

Related Questions