Bootstrap CSS not honoring padding around borders?

[EricLScace]

Objective 1: add some distance between the top of a container (shown by the dotted outline) and the first line of text.

Objective 2: reduce/control the space between the left side of the text and the border.

One would think that padding handles this. It does not. Forcing padding values does not achieve the objectives. Furthermore, adding padding to the top actually places the spacing outside the border. WTF?

Thoughts?

body {
  background-color: $gray;
  box-sizing: border-box;
  font-family: $font-family;
  font-size: $font-size;
  font-style: $font-style;
  font-weight: $font-weight;
  line-height: $line-height;
  // Must override the .container-fluid values for left & right padding
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 10;

}

[jordanallain]

are you only adding style rules to the body?

[EricLScace]

row-0.hbs file lays out the row (for now, pre-componentizing...)

{{!-- Place everything in one row --}}
<div class="container-fluid">
  {{!-- Top of display --}}

  {{!-- Top-left corner: choose type of search --}}
  {{!-- Fixed-width container --}}
  <div class="input-box container col-sm-2 height-row-0">
    Search selector goes here
  </div>

  {{!-- Fixed-width container: matrix image--}}
  <div class="test-box container col-sm-2 height-row-0">
    Matrix image goes here
  </div>

  {{!-- Fixed-width container: app title --}}
  <div class="test-box app-title container col-sm-4 height-row-0">
    All the Matrices
  </div>

  {{!-- Fixed-width container: logged-in user description --}}
  <div class="test-box container col-sm-2 height-row-0">
    Logged in user name & organization
  </div>

  {{!-- Top-right corner: authentication actions --}}
  <div class="test-box container col-sm-2 height-row-0">
    Authentication actions
  </div>
</div>

[EricLScace]

class styles controlled here:

@import './colors';
@import './shapes';
@import './typography';

// Classes are for styling.
// IDs are for UX behavior.

body {
  background-color: $gray;
  box-sizing: border-box;
  font-family: $font-family;
  font-size: $font-size;
  font-style: $font-style;
  font-weight: $font-weight;
  line-height: $line-height;
  // Must override the .container-fluid values for left & right padding
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 10;

}

.app-title {
  font-size: $font-size-title;
  text-align: center;
}

.height-row-0 {
  min-height: $min-height-row-0;
}

.input-box {
  background-color: $white;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  min-height: $min-height-row-0;
}

.test-box {
  border: $border-test;
  border-radius: $border-radius;
}

[EricLScace]

box-sizing: border-box had no impact on the problem. I forgot to take it out of the body spec... It was a failed attempt at finding a solution.

Moving on to make a test deployment of a simple Ember client to verify the deployment process. Will come back to this when the deployment is done.

[scottyscripts]

I think what you actually want to do is put the text Search selector goes here, Matrix image goes here, etc. inside its own tag. Maybe a p or span. Then, rather than styling the container, you would add the padding to element containing the text.

[EricLScace]

I'm trying to REMOVE the padding that is between the left side of the container and the text. How would this help?

[EricLScace]

But, testing.

[scottyscripts]

I was referring to this point

Objective 1: add some distance between the top of a container (shown by the dotted outline) and the first line of text.

[EricLScace]

(First attempt at Ember deployment generates a blank page... :-( But maybe GitHub is slow.)

[scottyscripts]

Not a bad idea to put the text in its own element either way, that way you can customize all of it's CSS, have a more clear idea of what is happening. Oh no! It usually should only take a few minutes at most. Check the console for errors!

[EricLScace]

Almost correct. The solution was to place the text in a . But the styling commands can remain on the containing

.

[EricLScace]

text in a <span>... MD swallowed the <> !

[EricLScace]

on to the ember deployment problem.