0

I'm trying to make some html form with help of bootstrap. Some of my inputs must have no gap from left or right side. But bootstrap .col-XX-Y blocks have gutter via paddings from left and right. So my idea was to use negative margin for my input elements, and display: block. And here I'm stuck. Please refer to this codepen example. I was faced with several strange things for me:

  1. Why input with display: block doesn't fill all it's parent container, like div does? It fills the container only with: width:100%; (comment width for red-bordered input in codepen example)

  2. Why if I'm apply negative margin-left to compensate parent container's left padding, my input shifts to the left, but keeps it's original width (like if left css property was used). Doesn't it have to behave like a block element (e.g. div): shifts to the left and keep filling of all width of it's parent, excluding right padding?

  3. When I'm apply negative right margin for my input to compensate parent's right padding, then nothing happens (look my example, compare orange div with red input). Why? What about of a behavior like block element?

If this is normal behavior, can you give me some link to html standard docs with explanations of that.

j08691
  • 204,283
  • 31
  • 260
  • 272
dajnz
  • 1,178
  • 1
  • 8
  • 20
  • Why don't you just remove the padding? – Andrew Mairose Jul 22 '15 at 21:11
  • Yes, that's easy, but I want to understand what's going on here. – dajnz Jul 22 '15 at 21:17
  • Look closely at the styles that are being applied to your elements. Both `.container` and `.col-md-12` are applying `padding-left: 15px; padding-right: 15px;`. You should probably try to remove those properties rather than trying to handle that in the children. – Wex Jul 22 '15 at 21:46
  • Ok, you are right, but this is not so important in my case, I've edited the codepen. Main question was why an input with display:block behaves not like reqular block level element. – dajnz Jul 22 '15 at 21:56

2 Answers2

1

If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.

Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.

<div class="col-md-12">
  <div class="row"> <!--this is what you need -->

  </div>
</div>

full example code

<div class="col-md-12">
    <div class="row">
        <input type="text" placeholder='I\'m some damned input' />
    </div>
    <div class="row">
        <div>I am some div</div>
    </div>
</div>
katwekibs
  • 1,342
  • 14
  • 17
  • Yes, because .row class sets negative margins from left and right, so it compensate paddings for .col-XX-Y class. But why I've to make a bunch of nested divs instead of one div, or better only input elements with right css? So main aim of my question is to understand behavior of input html element with display: block – dajnz Jul 22 '15 at 21:47
  • I think you mix native css and bootstrap.You said you are using bootstrap - right? _But why I've to make a bunch of nested divs instead of one div"_ Because thats how bootstrap works. bootstrap is css and other ui technologies already written by some other dudes to help you boot strap your ui development. this mean there is some already written css that if html elements on you page are laid out following there guidelines, it will produce what they documented. – katwekibs Jul 22 '15 at 22:05
  • _my question is to understand behavior of input html element with display: block_ http://stackoverflow.com/questions/4567988/what-is-it-in-the-css-dom-that-prevents-an-input-box-with-display-block-from-ex – katwekibs Jul 22 '15 at 22:22
  • Yes, you are right. But this behavior of input element was pretty new for me, so I asked an explanation to understand technical aspect of this. Of course, I'll use additional div as wrapper for my input, and manually will set it's paddings to zero when I need it. – dajnz Jul 22 '15 at 22:24
1

Form elements do not behave the same way as regular block level elements. When you display an <input> field as block it will not fill the full width.

For this reason you need to make give the element width: 100%. This is how Bootstrap styles form elements.

Like any other block element, giving it a width of 100% will allow it to fill the width of its container. When you apply a negative margin-left, the width will still be the same (100% = containers width) which will cause the gap to appear.

I would suggest wrapping the <input> field in a <div> and apply the negative margin to that instead:

.wrap {
    margin: 0 -20px;
}
.wrap input {
    width: 100%;
    display: block;
}
Jackson
  • 3,476
  • 1
  • 19
  • 29