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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.