The effect of whitespace on HTML structure and its solution

What is a white space character?

Whitespace characters: spaces, tabs, line breaks

Note: The browser will match all whitespace into a space when parsing HTML

Effects of whitespace on HTML structure HTML5 <textarea> label placeholder not displayed correctly

Bad structures cause unexpected results:

The label is wrapped:

 1  <!--  text field end label wrapping causes placeholder not to correctly represent  -->  2  <   TextArea  id  = "description"   name  = "description"   rows  = "5"   cols  = ""  wrap  = "Physical"   placeholder  = "This is a multi-line input box, enter your personal description"  > 
 </ textarea  >  

There are spaces between the

Tags:

 1  <!--  There is a space between the text field labels, which causes placeholder not to correctly represent the  -->  2  <   TextArea  id  = "description"   name  = "description"   rows  = "5"   cols  = ""  wrap  = "Physical"   placeholder  = "This is a multi-line input box, enter your personal description"  > </ textarea  >  

Result: a blank

Cause: Because the form area contains whitespace characters (spaces, tabs, newline characters), white space characters within textarea are considered content, preventing the display of placeholder text.

The correct operation:

 1  <!--  text field start label and end tag next to each other, placeholder correctly represents  -->  2  <   TextArea  id  = "description"   name  = "description"   rows  = "5"   cols  = ""  wrap  = "Physical"   placeholder  = "This is a multi-line input box, enter your personal description"  ></ textarea  >  

Result: occupies a position!!!

Default blank spacing for Inline-block

By default, there is approximately "4px" between the Inline-block elements (different browsers will have different sizes).

1 <ul>2   <Li>Item1</Li>3   <Li>Item2</Li>4   <Li>Item3</Li>5   <Li>Item4</Li>6   <Li>Item5</Li>7 </ul>

1 *{2 margin:0;3 padding:0;4 }5 ul {6 list-style:none outside none;7 padding:10px;8 Background:green;9 Text-align:center;Ten } One ul li { A Display:inline-block; - *display:inline; - zoom:1; the Background:orange; - padding:5px; -}

Cause: A whitespace character between the tags.

Workaround: At this point, you can change the structure of the HTML so that the last Li end tag is connected to the next Li, removing the whitespace characters.

1 <ul>2   <Li>Item1</Li3   ><Li>Item2</Li4   ><Li>Item3</Li5   ><Li>Item4</Li6   ><Li>Item5</Li>7 </ul>

You can click here to try the demo

Of course, the whitespace character is also characters, removing them can also be set by CSS style letter-spacing, word-spacing. For details, see: How to solve the blank spacing of inline-block elements

Whitespace characters that exist in the text

such as the following line break, and spaces.

< Div > They can stay 72-hours     within the Shandong      province after they has entered China via the Qingdao Internationa L Airport. </ Div >

Result: When the browser resolves, only the whitespace characters between the words are merged into a single space.
They can stay 72-hours within the Shandong province after they has entered China via the Qingdao international Airport.

Whitespace characters in text can be processed through CSS property White-space

White-space:normal | Pre | nowrap | Pre-wrap | Pre-line | Inherit

See details: Demo

filling a point: CSS3 added two new line-wrapping properties Word-wrap and Word-break.

Reference: Blue Ideal for small matches: in-depth understanding of whitespace and line breaks in CSS Mdn:white-space

The effect of whitespace on HTML structure and its solution