This depends on whether you wish to preserve all whitespace in certain elements and what exactly should happen there. Assuming that there are no CSS rules that might interfere, your CSS can be simplified to
a, span, tr { white-space: pre; }
because an a
element is alway within body
and td
by default inherits the property from tr
.
If you only wish to prevent multiple spaces from collapsing, instead of forcing fixed division to lines, then white-space: pre-wrap
or
replacing spaces by no-break spaces might be more adequate.
Finally, the need and possibilities for restricting the rule to selected elements greatly depend on how the selection should be done. Perhaps you can selectively set white-space
to pre
[or pre-wrap
] to some elements that enclose the relevant parts, remembering that the property inherits if not set on inner elements.
You can also break the inheritance: you could set white-space: pre
on a table
element for example, if you wish to
make the rule apply to most of the content, and set white-space: normal
on those rows or cells where it is not to be applied.
Updated: 07/31/2022 by
Creating extra blank space in your HTML on a web page can be achieved in many ways depending on the type of space you want to create. The following sections contains different ways to create extra space using both HTML and CSS in an HTML editor like Dreamweaver or a text editor like Notepad.
Creating extra spaces before or after text
One of the most confusing things to new users who're creating a web page is that they cannot press the spacebar multiple times to make additional spaces. To create extra spaces before, after, or in-between your text, use the [non-breaking space] extended HTML character.
For example, with the phrasing "extra space" using a double space, we have the following code in our HTML.
extra space
Note
If you are using a WYSIWYG editor to enter the code above, you must be in the HTML tab or editing the HTML code.
Keep spacing in text that is pasted to a page
If you are pasting text with extra spaces or tabs, you can use the HTML
tag to keep the text formatted. Below is an example of how to paste text with extra spaces using thetag.This text has lots of spacesThe example above is done using the below HTML code.
This text has lots of spaces
- See our HTML
tag page for further information on this tag.
Note
If you are using a WYSIWYG editor to enter the code above, you must be in the HTML tab or editing the HTML code.
Creating extra space around an element or object
Any HTML element can have additional spacing added to the top, right, bottom, or left. However, make sure you understand the difference between margin and padding before deciding the type of space you want to add around the element or object. As seen in the picture below, padding surrounds the element, within the border, and the margin outside the border.
The example below shows our paragraph surrounded by a border, indented with a margin, and with spacing on the right and bottom.
An example of a paragraph with margin and padding.
The example above was created using the code below.
Example of a paragraph with margin and padding.
In the first section of the code, "margin-left: 2.5em;" adds a left margin of 2.5 em, which gives the appearance of indented text. As shown by the example, this spacing is outside of the border. In the next section, "padding: 0 7em 2em 0;" is defining the top, right, bottom, and left [clockwise] padding. There is "0" top padding, "7em" right padding, "2em" bottom padding, and 0 left padding. The remainder of this example is defining how the border should look.
Creating a tab using CSS and HTML
A tab can be created in HTML by adjusting the left margin of an element. For example, this paragraph has a left margin of 2.5 em from the element containing the text. The CSS to create this left margin is shown below.
.tab { margin-left: 2.5em }
After placing this code in our CSS file, we can apply the "tab" class to any text to create the appearance of a tab. The value of the margin-left can be increased or decreased depending on your needs.
Although we recommend the method above, the margin-left CSS can also be added inline, as shown in the example below.
An example of a 5em left margin.
An example of a 5em left margin.
- How to indent or tab text on a web page or in HTML.
To add extra space below a line or paragraph of text, or push text down lower on the page once, you can use the
tag. Below is an example of how this technique can be applied.
This sentence contains example text.
As you can see, two breaks add the space above.
The code above creates the text shown below.
This sentence contains example text.
As you can see, two breaks add the space above.
Additional breaks can be added if needed. However, we suggest using the CSS method mentioned earlier to add padding and spacing around your text if being done in multiple places on a page.
Add line spacing between text lines
The spacing between lines of text can be adjusted by increasing and decreasing the line-height using CSS to make the text easier to read. Below is an example of extra line spacing being added to a paragraph of text.
Text shown below with extra spacing
The code above creates the text shown below.
This example text is an example of how extra space between lines could be added to text. However, we would not recommend using this much line space because it does make it more difficult to read. We're only using this much line spacing as an example.
In our example above, we used 3.5 em as the line-height to help emphasize the spacing between the lines. However, for readability, we recommend using around 1.7em. Adding some additional spacing between lines always improves the readability of your text. However, adding too much can make it more difficult to follow and scan.
Add spacing around an image
To add extra space around an image, use CSS. To push text down lower on the page, you can use the
tag. Below are examples of how
these techniques can be applied.
CSS example
Add Space Around An ImageAdd Space Around An Image
CSS, Image Outside of Paragraph Tags
Some text.
Some text.
Example with
tagAdd Space Around An ImageAdd Space Around An Image
Image Inside of Paragraph Tags, text squishes around image.
Some text. Some text.
Add Space Around An ImageAdd Space Around An Image
Image Inside of Paragraph Tags with <br /> tag, text above and below image.
Some text.
Some text.How do you preserve spaces and line breaks in HTML?
Thetagdefines preformatted text. Text in aelement is displayed in a fixed-width font, and the text preserves both spaces and line breaks.How do you preserve text formatting in HTML?
Thetagin HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.How do I keep white space in CSS?
Preserving White Space Using CSS.inherit – inherits it's property from the parent container..normal – white space works as usual..nowrap – next will never wrap until it encounters a
tag, all other white space collapses as usual..pre – text acts like the HTMLtag, formatting is as you see it, is as you type it..Is there a space tag in HTML?
To add real spaces to your text, you can use the character entity. Tip: The non-breaking hyphen [‑] is used to define a hyphen character [‑] that does not break into a new line.Chủ Đề