Twitter Bootstrap - Border Pushing Contents Down

Twitter BootStrap - Border Pushing Contents Down

This has already been answered (couldn't find the question though)

You have to set borders to an inside element, not the spans themselves, because they are too tightly width'ed.

Another solution is to change the box-sizing to border-box. But this is css v3.

Update

Here are several examples, my best guess is the 3rd or 2nd solution.

• Demo (jsfiddle)

• Full screen demo (jsfiddle)

• Demo responsive (jsfiddle)

Solution 1 : inners

As such, will not respond well to responsive (needs @media rules to set the border depending on stacking)

<div class="row">
    <div class="span3">
        <div class="inner"></div>
    </div>
    <div class="span6">
        <div class="inner"></div>
    </div>
    <div class="span3">
        <div class="inner"></div>
    </div>
</div>

.row > [class*="span"]:first-child > .inner {
    border-left: 5px solid red;
}
.row > [class*="span"]:last-child > .inner {
    border-right: 5px solid red;
}

Solution 2 : fluid

As such, will respond well to responsive

<div class="row-fluid">
    <div class="inner-fluid clearfix">
        <div class="span3"></div>
        <div class="span6"></div>
        <div class="span3"></div>
    </div>
</div>

.row-fluid > .inner-fluid {
    border: 5px none green;
    border-left-style: solid;
    border-right-style: solid;
}

Solution 3 : box-sizing

As such, will not respond well to responsive (needs @media rules to set the border depending on stacking)

<div class="row foo">
        <div class="span3"></div>
        <div class="span6"></div>
        <div class="span3"></div>
</div>

.foo [class*="span"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.foo.row > [class*="span"]:first-child {
    border-left: 5px solid orange;
}
.foo.row > [class*="span"]:last-child {
    border-right: 5px solid orange;
}

I hope you'll find your size.

Adding a border pushes down contents

UPDATE:

You can prevent this movement by adding margin: 0; to the style of your p tag. See below for an explanation of how and why this happens.

---

The reason your p tag gets pushed down is because of margin collapsing (or, rather, margins not collapsing when you set a border).

See this page for a more in-depth explanation of how it works. From that page:

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Basically, your margins are getting collapsed by the browser when you don't have a border set, yet they are calculated when you do set that border.

---

For ways to prevent the browser from collapsing margins, see this question. From that question (first part originally quoted from this other question):

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

.parent {
padding-top: 1px;
margin-top: -1px;
}

Pushing a column to another row

Try something like this:

.row div {

  border: 1px solid black;

  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">

    <div class="col-lg-6 col-md-12">A</div>

    <div class="col-lg-6 col-md-4 col-md-push-8 col-lg-push-0">B</div>

    <div class="col-lg-6 col-md-4 col-md-pull-4 col-lg-pull-0">C</div>

    <div class="col-lg-6 col-md-4 col-md-pull-4 col-lg-pull-0">D</div>

  </div>

</div>

Adding borders to span divs in Bootstrap messes up layout

The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:

HTML

<div class="row">
   <div class="span4">
       <div>a</div>
   </div>
   <div class="span8">
       <div>b</div>
   </div>
</div>

CSS

.span4 > div, .span8 > div
{
   background-color:#eee;
   border: 1px solid #888;
   border-radius:3px;
}

Top Border pushes header down

This is because by default (the default browser stylesheet) h1 elements have a top and bottom margin.

When you add the border-top: 1px, the margin becomes the distance between the h1 and #header, not h1 and body.

A browser reset can fix this.

You will notice when ticking Normalized CSS in jsFiddle, it works perfectly.

---

Related Topics