The effect of blank spaces on the HTML structure and solutions.

The effect of blank spaces on the HTML structure and solutions.
What is a blank space character?

Blank Space: space, tab, Line Break

Note: When parsing HTML, the browser merges all blank spaces into one space.

Effect of blank spaces on HTML structure the <textarea> label placeholder cannot be correctly displayed in html5.

Unexpected results caused by poor structure:

The label is wrapped in a new line:

1 <! -- Placeholder cannot be correctly expressed due to the end of the text field label wrap --> 2 <textarea id = "description" name = "description" rows = "5" cols = "30" wrap = "physical "placeholder =" this is a multi-line input box, enter your personal description ">
</Textarea>

There is a space between tags:

1 <! -- There is a space between the text field labels, as a result, placeholder cannot correctly represent --> 2 <textarea id = "description" name = "description" rows = "5" cols = "30" wrap = "physical" placeholder = "This Is multi-line input box, enter your personal description "> </textarea>

Result: A blank area is displayed.

 

Cause: because the form area contains blank characters (spaces, tabs, and line breaks), the blank characters in textarea are considered as content, blocking the display of placeholder text.

Correct operation:

1 <! -- The start tag and end tag of the text field are next to each other, placeholder correctly indicates --> 2 <textarea id = "description" name = "description" rows = "5" cols = "30" wrap = "physical" placeholder = "this is a multi-row input box, enter your personal description "> </textarea>

Result: The placeholder is displayed !!!

Default blank spacing of inline-block

By default, inline-block elements are approximately 4 PX separated (different browsers 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;10 }11 ul li {12   display: inline-block;13   *display: inline;14   zoom: 1;15   background: orange;16   padding: 5px;17 }

Cause: a blank space between tags.

Solution: in this case, you can change the HTML structure to connect the end tag of the last li to the next li to remove the blank 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 blank spaces are also characters, which can also be set by CSS style letter-spacing and word-spacing. For details, see: how to solve the blank spacing of inline-block elements

 

Blank characters in text

The following line breaks and spaces.

<div>They can stay 72-hours     within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

Result: When parsing by the browser, only the blank spaces between words are retained and merged into one space.
They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.

The white-space attribute of CSS can be used to process white space characters in text.

White-space: normal | pre | nowrap | pre-wrap | pre-line | inherit

Normal: Merge blank characters, allow automatic newline nowrap: Merge blank characters, do not allow automatic newline pre-line: Merge blank characters (excluding line breaks), allow automatic newline pre: Do not merge blank characters, automatic line feed not allowed pre-wrap: Do not merge blank characters, and allow automatic line feed (retain automatic line feed Based on pre)

For details, see demo.

Additionally, CSS3 adds two new line feed attributes: word-wrap and word-break.

Reference: The Blue ideal of a match: a deep understanding of the blank space in CSS and the line feed MDN: white-space