3

In my PhpStorm 7, line breaking some elements (every elements) like this:

<input type="text">
<input type="text">
<input type="text">

Causes some space between the tags in my rendered html page (with all navigators) and breaks all my grids:

enter image description here

I reseted all margins, etc.. so i have 0 margins or something else in my css.

When i put them on the same line, the spaces are gone:

<input type="text"><input type="text"><input type="text">


enter image description here

In my inspector (no margins, just padding and a thin border). And they have all default css:
enter image description here
enter image description here

I just can't find how to configure it. It's a CakePHP view.

LazyOne
  • 158,824
  • 45
  • 388
  • 391
hjrshng
  • 1,675
  • 3
  • 17
  • 30
  • possible duplicate of [Why does the browser renders a newline as space?](http://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space) – ndm Oct 06 '14 at 19:14
  • Yes, definitely. First time I noticed that behavior. – hjrshng Oct 06 '14 at 19:37

1 Answers1

3

This is a common issue with the whitespace and how it's handled by browsers. There are many similar questions and answers, like this one.

Basically you can use display: block and float: left or if you are using a template rendering engine, they may provide helpers for removing the whitespace, like {strip} in Smarty or {% spaceless %} in Twig. There are other ways to achieve this in HTML, google and search SO.

Community
  • 1
  • 1
Ian Bytchek
  • 8,804
  • 6
  • 46
  • 72
  • I don't think the problem come from css nor browser, because when i put them in the same line in my code, i don't have those white spaces anymore. Using a different templating won't be a solution for me, for the same reason. – hjrshng Oct 06 '14 at 19:01
  • Technically there is no problem, this is the expected (kind of) behaviour. Whitespaces is the category of characters, in your case whitespace is the new line character, which is rendered by by the browser as a little space between the the inputs. The only way to get rid of it without touching css is to literally remove them and place them all on the same line, just like you did. Alternatively there are other ways described above. – Ian Bytchek Oct 06 '14 at 19:11
  • 2
    @HaJa Believe it or not, but it _is_ being caused by the browser, it's a known, age old "problem", just [**read through the existing questions here on SO**](http://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space), or the HTML specs if you're bored. – ndm Oct 06 '14 at 19:11
  • Better believe it… :) – Ian Bytchek Oct 06 '14 at 19:12