HTML Academy
Using margins to format the text
Typography13/20
Back to the list of tasks
  • 1. The font-size property
  • 2. Relative font size
  • 3. The line-height property
  • 4. Relative line height
  • 5. The font-family property
  • 6. The font-weight property
  • 7. The text-align property, horizontal text alignment
  • 8. The text-align property does more than just align text
  • 9. The vertical-align property, vertical text alignment
  • 10. Use of the background in typography
  • 11. The color property, text color
  • 12. Using margins to format the text
  • 13. The white-space property, space management
  • 14. Assignment of styles to preformatted text
  • 15. The text-decoration property, underlining as well as other effects
  • 16. The font-style property, italics
  • 17. The text-transform property, character case
  • 18. Shave space off the footer
  • 19. Summary of “Typography”
  • 20. Test: Designing an article
Assignment of styles to preformatted text
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The white-space property, space management

As you already know, the browser ignores multiple spaces and line breaks in the HTML code. You can change this behavior using the <pre> tag.

However, CSS provides you with more flexible options for managing spaces and line breaks. The white-space property is responsible for doing this. It has the following values:

  • nowrap – It collapses extra spaces and displays all of the text in one line without any line breaks.
  • pre – It preserves all spaces and line breaks that are included in the source code in a way that is similar to the <pre> tag.
  • pre-wrap — It functions similarly to the pre tag. However, it automatically adds line breaks if the text does not fit inside the container.
  • normal – This is the default mode: extra spaces and line breaks are collapsed. The text is transferred while the spaces at the end of lines are removed.

Actually, white-space property can take two more values:

  • break-spaces – The behavior is identical to pre-wrap but when spaces are collapsed specially marked spaces are preserved, such as spaces at the end of a line.
  • pre-line — The behavior is the same as normal, but extra spaces are collapsed and lines are broken where the line break character and <br> tag are inserted as well as based on how long the line is.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p class="page-title">Blog</p> <nav class="blog-navigation"> <a href="index.html">Return to home</a> </nav> </header> <main> <article> <h1>Day Six. How I Didn’t Understand Anything (Continued)</h1> <p class="nowrap">Today I visited several websites to see how they are laid out. I saw some quotes and unfamiliar <code>&lt;cite&gt;</code> and <code>&lt;blockquote&gt;</code> tags.</p> <p class="like-pre">I didn’t understand how these two tags differ from each other. I closed the browser. I’ll figure it out tomorrow.</p> <p>But look at what I saw.</p> <pre><code>&lt;blockquote&gt; &lt;p&gt;Intelligence is highly valued when power is held cheap.&lt;/p&gt; &lt;cite&gt;Jason Statham&lt;/cite&gt; &lt;/blockquote&gt;</code></pre> </article> <aside class="partnership"> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 24px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } del { color: #ff4400; } ins { color: rgb(105, 178, 83); } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: "Verdana", sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } .partnership { margin: 30px 0; padding: 30px; text-align: center; color: #ffffff; background-color: #4a87fa; background-image: url("img/bg-partnership.svg"); } footer { margin-top: 30px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Set the white-space property to the value pre-wrap for the h1 heading,
    2. and then set it to the nowrap value in the rule for the .nowrap class,
    3. but set it to the value of pre in the .like-pre rule.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.