缩进或空格在html中重要吗? [英] Does indenting or white space matter in html?

问题描述

当然需要在我们的标记上进行缩进，但这确实与浏览器的呈现方式有关.

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

我有一个带有label，span和input的简单结构.中间没有缩进的对齐方式发生了变化，为什么会发生这种情况?

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

<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>

Firefox和Chrome中的

演示 问题

Demo issue in firefox and chrome

推荐答案

空白确实在页面渲染方面有所不同，但是一串长于一个的空白将仅被渲染为一个空白，因此(换行)

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.

这篇关于缩进或空格在html中重要吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！