div CSS text font line Gao Xing distance depth understanding CSS Line spacing settings

Source: Internet
Author: User

div CSS text font line Gao Xing distance depth understanding CSS Line spacing settings

div CSS text font line Gao Xing distance DIVCSS5 takes you in-depth understanding of CSS line spacing settings, how font spacing is most easily set.

In the article, to achieve the adjustment, set the text font spacing (line spacing) to use the Line-height property. (Body feeling music)

To make the text of each line a certain distance, it can be implemented by Line-height style. Next, DIVCSS5 the font text up and down with a div CSS instance.

Related Extended CSS Tutorials:
CSS Line-height
div CSS Word spacing

To observe the effect of the line spacing setting, create a new two Div box object named ". Divcss5-a" and ". Divcss5-b" for the Div.

1. Div+css instance Full HTML code: (Body music)

  1. <! DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <Meta charset="utf-8" />
  5. <title>divcss5 css Line spacing instance </title>
  6. <style>
  7. . divcss5-a{line-height:22px}/* CSS Comment Description: Set line spacing height 22px */
  8. . divcss5-b{line-height:40px}/* Set line spacing height 22px */
  9. </style>
  10. </head> (somatosensory music)
  11. <body>
  12. <div class="divcss5-a">
  13. I was set to line height 22px<br />
  14. My line spacing is 22 training <br />
  15. DIVCSS5 placeholder Content
  16. </div>
  17. <div class="Divcss5-b">
  18. I was set to line height 40px<br />
  19. My line spacing is 40 training <br />
  20. DIVCSS5 placeholder Content
  21. </div>
  22. </body>
  23. </HTML> (Body Sense music)

Set up two boxes respectively CSS line height interval set to 22px and 40px, you can copy the above code to observe the effect of the CSS set objects within the font text on the downward spacing. Learn what line height code is set for line spacing.

2, CSS Div line High Line spacing effect


Font up and down line spacing Css+div instances

3. Summary
To implement line spacing between line lines line height style In fact, we only use the text on the object to set the Line-height style, the general spacing value is set to more than 14px, according to the CSS font size, CSS row height value can not be less than the font value, Otherwise, the spacing setting value is smaller than the font size value, and the font overlaps a portion, creating an incompatible effect.

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.