5

Ofcourse indenting is need on our markup , but that really matter the way the browser render.?

I have an simple structure with label , span and input. The middle one without indent got a alignment change , why this is happening ?

enter image description here

<label class="field-row">                
       <span class="label-text" >Email</span>
       <input type="email" />
 </label>
 <label class="field-row">
       <span class="label-text" >Email</span><input type="email" />                
 </label>

Demo issue in firefox and chrome

Sarath
  • 9,030
  • 11
  • 51
  • 84
  • You should specify whether you are asking a general question (as in the title here) or a specific one (asked in the body). Generally, the more specifically you ask, the better the chances for solving the specific problem. Moreover, the question itself should contain enough code to reproduce the problem. – Jukka K. Korpela Mar 31 '14 at 09:50
  • @JukkaK.Korpela i hope there is enough explanation and code in the question..if you want to improve edit it. its a general question with a specific example .. wht it look like for you..? – Sarath Mar 31 '14 at 10:05
  • The question is OK except that it asks two questions at very different levels. For the general question on whitespace in HTML, see e.g. http://stackoverflow.com/questions/1425830/definition-of-html-whitespace-rules (which still has no satisfactory answer). – Jukka K. Korpela Mar 31 '14 at 10:30

2 Answers2

7

Whitespace does make a difference in page rendering, howevera string of whitespaces longer than one will just be rendered as one whitespace, so this (line break)

<label class="field-row">                
   <span class="label-text" >Email</span>
   <input type="email" />
</label>

and this (no line break, but a whitespace between the span and input)

<label class="field-row">                
   <span class="label-text" >Email</span> <input type="email" />
</label>

will be rendered the same, while this (no whitespace)

<label class="field-row">                
   <span class="label-text" >Email</span><input type="email" />
</label>

will be rendered without that extra space in between the elements.

BrotherBallan
  • 369
  • 2
  • 6
  • This is good answer to the specific question asked. An answer to the general question in the title and at the start of question body would have to be much longer. – Jukka K. Korpela Mar 31 '14 at 09:53
  • 1
    @JukkaK.Korpela it gives answer to both.. for wht you need another para of explanation ? – Sarath Mar 31 '14 at 10:09
2

Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace.

This means, unless you use the tag <pre>, five white spaces get rendered just the same as a tab or fifty line breaks.

René Roth
  • 1,979
  • 1
  • 18
  • 25
  • Sorry you're right. Got something mixed up there! It would be good practice to correct the wrong info, though. – René Roth Mar 31 '14 at 09:45
  • 2
    [Read the StackOverflow rules on commenting.](http://stackoverflow.com/help/privileges/comment) If something is wrong about my answer, correct it. – René Roth Mar 31 '14 at 09:53
  • Mentioning `pre` at all was unnecessary for addressing the specific question. The point is that if you do such things, you should check the facts, or remove the unnecessary statement, at least after the issue has been mentioned. – Jukka K. Korpela Mar 31 '14 at 10:20
  • The question asked was a general question. I repeat again: where is the error in my answer? – René Roth Mar 31 '14 at 10:22
  • Beyond `pre`, there are several other contexts where whitespace does not collapse, such as `textarea` elements, attribute values, and any element on which `white-space: pre` has been set. – Jukka K. Korpela Mar 31 '14 at 10:27