Element on same line not causing space to appear in between buttons CSS

Question

Can anyone explain this odd behavior, why extra spacing is adding in between buttons.

Case -

Following is the HTML code which is adding extra space in between buttons if written like this -

<div class="wrapper">
        <button class="btn one">First long button with a long text length</button>
        <button class="btn two">Second long button with a long text length</button>
    </div>

Output -

BUT if I am writing like this then no space is coming -

Code -

<div class="wrapper">
        <button class="btn one">First long button with a long text length</button><button class="btn two">Second long button with a long text length</button>
    </div>

Output -

CSS Code -

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  padding: 10px;
}

.btn {
  font-size: 14px;
  line-height: 28px;
  background: #FFFFFF;
  border: 1px solid #C3C3C3;
  position: relative;
  padding: 10px;
  display: inline;
}

.btn:before {
  content: "";
  position: absolute;
  width: 4%;
  height: 5px;
  background: #FFF;
  right: 0px;
  top: -5px;
}

.two {
  display: inline;
}

score 4 · Accepted Answer · answered Jul 21 '17 at 07:53

4

With inline-elements, line-breaks (and multiple spaces) are converted to 1 space.

answered Jul 21 '17 at 07:53

Emile Eichenberger

121
5

score 2 · Answer 2 · answered Jul 21 '17 at 09:13

There are several things you can do in order to eliminate white-space between elements; however it depends on the kind of elements used and the browser's html rendering engine.

Here are some things that work for the "white-space" issues, but bare in mind that ultimately you want your code to look neat.

Good solution .: no white-space & clever CSS
Coding your HTML with no white-space will definitely sort this out for most major browsers, but it makes your code illegible; however you can run your code through an HTML pre-processor (like PHP) and minify your code before serving it to the browser. This may seem "daft" for speed concerns, but if you can get clever with "configuration" of your projects in your pre-processor to "bake" (minify) your source-code as a separate file while in "development" mode; and only "serve" the minified code when in "live" mode.

If you prefer the "pre-processor" option then have a look at: how to minify html code

In your CSS, take note of how different elements render in the browser.
With "block-type" & "view-port" elements, wrap them inside other elements you can control; because styling these to be displayed inline may cause issues, hence why the CSS value for these: display:inline-block, but it's not a 100% guarantee to look as intended.

HTML only .: comments & weird closing-angle placement .: ugly but works

<button>one</button><!--
--><button>two</button>

<button>one</button
><button>one</button>

CSS only .: font-size zero on parent, consistent position & margin
If you're using the font-size:0px then you have to be smart with your CSS selectors. Forcing standard margins/padding for all your elements is a good idea for consistency:

body{font-size:0px;}
p,b,i,a,span{font-size:16px;}
div,svg{position:relative; box-sizing:border-box; margin:0px;}

score 1 · Answer 3 · answered Jul 21 '17 at 07:54

The \n is a legal character in html, it just don't return line. You can resolve it by adding font-size:0 to the container of the buttons for example, as the buttons have font-size:14px.

div.wrapper { font-size:0 ; }

Just be carefull with the other elements in your wrapper wich will heritate from your font-size:0. OR : you can write in on the same line... :)

Element on same line not causing space to appear in between buttons CSS

3 Answers3