Search results
Apr 23, 2024 · The white-space CSS property sets how white space inside an element is handled. Try it. The property specifies two things: Whether and how white space is collapsed. Whether and how lines wrap. Note: To make words break within themselves, use overflow-wrap, word-break, or hyphens instead. Syntax. css.
Code sample
code {white-space: pre;}Definition and Usage. The white-space property specifies how white-space inside an element is handled. Show demo . Browser Support. The numbers in the table specify the first browser version that fully supports the property. CSS Syntax. white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; Property Values. Related Pages.
- no. Read about animatable
- yes
- normal
- CSS1
Sep 6, 2011 · CSS Almanac → Properties → W → white-space. Sara Cope on Sep 6, 2011 (Updated on Sep 28, 2022 ) The CSS white-space property controls how text is handled on the element it is applied to. Let’s say you have HTML exactly like this: <div>. A bunch of words you see. </div>.
- What Is White Space?
- Micro vs. Macro White Space
- Micro White Space
- Macro White Space
- So, What Determines Which White Space You Should use?
- Active vs. Passive: Another Way to Approach The Usefulness of White Space
- Three Elements to Consider When Designing Negative Space
- The Take-Away
- References & Where to Learn More
White space is the area between design elements. It is also the space within individualdesign elements, including the space between typography glyphs (readable characters). Despite its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image. White space can cause problems between designers and ...
White space is commonly categorized based on the density of micro white space and its relationship to macro white space. We’re talking about ratios and proportions.
We call the small space between design elements micro white space. You can find it between lines and paragraphs. It includes the space between gridimages and that used to separate menu links. Micro white space has a direct impact on content legibility. For example, marginal white space surrounding paragraphs affects the user’s reading speed and com...
Macro white space is the large space between major layout elements, and the space surrounding the design layout. You’ll find macrowhite space to the right and the left of most websites’ content, and in the space between a website’s content blocks. Unlike micro white space, macro white space acts as a container of the overall design. It’s “big pictu...
The use of both macro and micro spaces depends on the following factors: Content- With more information in the layout, fewer amounts of macro white space will be available. In contrast, the volume of micro white space will increase. This compromise is vital; otherwise, pages would be solid chunks of data: extremely difficult to read! For example, B...
Besides the differentiation between micro and macro white space, you can also look at white space as being active or passive. Active white space - the white space used to enhance page structureand help guide the user through the page’s content. Passive white space – applied to improve the aestheticsof the layout without guiding the user through a s...
Legibility
As we saw, micro white space is essential for making interface content legible. As a designer, you should consider white space when choosing the design typography specifications, such as font, size, color, style, leading, kerning, and tracking. Remember the image from the previous page? Changing the white space layout affects reading performance and overall user experience. Happy readers are far more likely to stay on your page.
Design Tone and Branding
White space contributes to the tone of the overall design. Websites with larger amounts of macro white space may reflect minimalism and luxury. Websites with smaller amounts of macro white space may come across as informative, as is the case with news websites (Kyrnin, 2015). Note: these indications aren’t “set in stone”. It’s always best to test the use of white space on your users. Only they can tell you how they perceiveyour designs.
Focus and Attention
White space can help guide the user through interactive content. It may help to build focal points and direct the user’s attention to specific layout parts. Part of the strategic planning for a website is giving priority to specific elements or content. You can use many visual methods to spotlight specific elements; one is to play with the amounts of white space around these focal points. The branding and print industries apply this theory to draw attention to brand messages.
White space (negative space) is the area between design elements. It's another tool for designers to design for the user experience (UX). Remember that white space is not necessarily white; it’s just the name to indicate spaces where there are neither user interface (UI) elements nor specific content. As a designer, you can introduce white space ba...
Many articles exist online about white space and its relevance in design. The following is a list of articles where you can delve into the power and usage of negative space. Boag, P. (2011, February 15) Why White Space Matters. Boag World. [2014, June 20] Boulton, M. (2007).Whitespace. A List Apart. [2015, April] Kollin, Z. UX Myths.Myth #28:White ...
- Mads Soegaard
- Use both micro and macro white space. Micro and macro white space each serve a different purpose on your site. Micro white space refers to the spaces around smaller elements on a web page, such as text.
- Don’t go overboard. As we’ve seen, white space can enhance your website design. But deciding how much to use can be tricky. To ensure that each use of white space serves a purpose, ask yourself the following questions
- Manage visual hierarchy with white space. A website’s visual hierarchy refers to the path a visitor’s eye follows on a page. Cluttered website layouts make it hard for visitors to know what details to focus on or where to go next.
- Pay close attention to the white space around your CTAs. The most useful websites have a primary call-to-action button: For a restaurant website it might be “Make a Reservation.”
Sep 2, 2020 · white-space is a CSS property that helps control how whitespace and line breaks within an element’s text are treated. The white-space property can take these values: normal: The default value. Multiple whitespaces are collapsed into one. The text wraps to the next line when needed.
Jul 21, 2017 · Syntax. The white-space property is specified as a single keyword chosen from the list of values below. Values. normal. Sequences of whitespace are collapsed. Newline characters in the source are handled the same as other whitespace. Lines are broken as necessary to fill line boxes. nowrap.
