Steve Grove Steve Grove - 6 months ago 9
CSS Question

Button elements on separate lines in html source displayed differently if on same line of html

Can anyone explain why the presence of whitespace/newlines between button elements in the html source renders different output using Bootstrap 3? The first row of elements have the required gap (margin?) I was expecting but if I put the same three button elements on the same line then they are squashed with no separation. Please refer to the jsfiddle which includes the latest CDN for bootstrap.

<div class="row">
<div class="col-lg-12">
<button type="button" class="btn btn-xs">Mini button</button>
<button type="button" class="btn btn-xs">Mini button</button>
<button type="button" class="btn btn-xs">Mini button</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="button" class="btn btn-xs">Mini button</button><button type="button" class="btn btn-xs">Mini button</button><button type="button" class="btn btn-xs">Mini button</button>
</div>
</div>


Different spacing depending on html source code whitespace

https://jsfiddle.net/stevegrove/zk2mbeax/1/

Please note: I am not after three buttons on three lines in the rendered web page - I would like them horizontally drawn be that inline or inline-block.

Answer

whitespace in between inline elements (line break or space in your source code) will be condensed to a single space per the html spec. whitespace between block level elements will be ignored. You could make them display:block and float:left;

https://jsfiddle.net/712ykgso/1/ for an example

https://css-tricks.com/fighting-the-space-between-inline-block-elements/ for much more thorough breakdown.

Comments