How to insert spaces/tabs in text using HTML/CSS

HTML or HyperText Markup Language is used to design web pages. It was released in 1993. The file extension name for HTML file is “.html”. An HTML file is created with the help of CSS and JavaScript. HTML describes the webpage’s structure, basically how the page is created or the skeleton body of the webpage. The codes are written in the form of an element. These elements are also called HTML tags. The tags use the markups of HTML. The golden rule of HTML is all the major tags must be opened with . When we have multiple tags, each tag must be closed in the sequences.

What is CSS?

CSS or Cascading Style Sheet is a language used to design the webpage that HTML creates. It is the core language of web designing.

As web designers, we must learn how to insert tabs and spaces for a better appearance of a web page. It also improves the readability of our HTML code. For adding multiple spaces, we cannot use the spacebar numerous times. We use various spaces in the HTML code to break the code into different lines. Spaces in the code also design the code in a better way, and it also improves the readability of the code. If there are multiple spaces in our code, the browser deletes extra spaces and allows only one space in the code. But it is not true that we cannot add multiple spaces and tabs in the code.

There are some approaches for adding some spaces in HTML and CSS.

These approaches are as follows:

Approach-1

By using unique and designated characters, we have to use these tags if we want to add more than one space in the code or the webpage. These tags also represent the non-breaking space.

There are three special and designated characters for using spaces in the HTML and CSS code.

• The &nbsp— For non-breaking spaces, this unique character is used in the entire code. It may generate twice the common space. The spaces generated by this unique character cannot be broken by code wrapping.
• The &ensp— This unique character is used entirely to denote the current fonts’ half-point size, also called en spaces.
• The &emsp— This unique character is used entirely to denote the current fonts’ total size, also called em spaces. It may generate four times the common space.

for regular space -  . For two space gaps - &ensp. For four space gaps- &emsp.

      
javaTpoint
 How to insert spaces/tabs in text using HTML or CSS? 
This is a   for regular space.
 
This is a   for two spaces gap.
 
This is a   for four spaces gap.
  

Approach-2

Using TAB size property: This property is used to set tab size space in HTML code. Changing the value of the tab character is also possible in the code. This method only works in tags.

     .tab5 < tab-size: 5; >.tab6 < tab-size: 8; >.tab7 
javaTpoint
 How to insert spaces or tabs in text using HTML or CSS? 
This is a tab which show 5 spaces.
 
This is a tab which show 8 spaces.
 
This is a tab which show 10 spaces.
 
  
 
 
 
Approach-3
 
By creating a new class for spacing through CSS: By using the margin-left property, a new class can give a certain amount of spaces. We can assign the number of spaces by providing the number of pixels in the property. It also allows the spaces next allow to the line.
 
     .tab 
javaTpoint
 How to insert spaces or tabs in text using HTML or CSS? 
This is a tab space in the above document.
  
 
 
 
Approach-4
 
By adding a line break in HTML: We can add a line break by using the tag 
in the HTML code. With the help of this tag, we can create a new line.
 
   
this is my first line. 
this is second line.
   
 
Источник
 
How to insert spaces/tabs in text using html/css?
 
Inserting spaces or tabs in text on a web page can be a challenge, as HTML and CSS do not natively support adding spaces or tabs in text content. However, there are several methods to achieve this, each with its own pros and cons. Here are a few of the most common ways to insert spaces or tabs in text using HTML and CSS:
 
Method 1: Non-breaking spaces
 
To insert spaces/tabs in text using HTML/CSS, you can use Non-breaking spaces. Here is how you can do it:
 
Step 1: Open your HTML file and add the following code:
 
p>This               is               a               text               with               non-breaking               spaces.p>
 
Step 2: Save the file and open it in your browser. You will see the text with the spaces inserted.
 
Explanation: In HTML, the   entity represents a non-breaking space. By inserting multiple   entities, you can create spaces/tabs in your text.
 
Example 1: Here is an example of using non-breaking spaces to create a tab:
 
Example 2: Here is an example of using non-breaking spaces to create a multi-line tab:
 
p>This                is                a                text                with                a                multi-line                tab.p> p>                This                is                another                line                with                a                multi-line                tab.p>
 
Note: The number of   entities you insert determines the length of the space/tab.
 
Method 2: HTML pre-formatted text
 
To insert spaces or tabs in text using HTML/CSS, you can use the HTML pre-formatted text. The pre-formatted text preserves the spaces and tabs as they are in the HTML code. Here’s how you can use it:
 
pre> This is a pre-formatted text with spaces and tabs. pre>
 
pre> This is a pre-formatted text with non-breaking spaces. pre>
 
pre> This is a pre-formatted text with em spaces. pre>
 
pre> This is a pre-formatted text with en spaces. pre>
 
pre> This is a pre-formatted text with tabs. pre>
 
That’s it! By using the HTML pre-formatted text, you can easily insert spaces and tabs in your text.
 
Method 3: CSS padding and margins
 
To insert spaces or tabs in text using CSS padding and margins, you can use the following methods:
 
You can use the padding property to add space within an element. The padding property adds space within the element, between the element’s content and its border.
 
This will add 20 pixels of space to the left of the paragraph text.
 
You can use the margin property to add space outside an element. The margin property adds space outside the element, between the element and its neighboring elements.
 
This will add 20 pixels of space to the left of the paragraph element.
 
You can also use both padding and margin properties together to add space both within and outside an element.
 
p  padding-left: 20px; margin-left: 10px; >
 
This will add 20 pixels of space within the paragraph element and 10 pixels of space outside the element to the left.
 
If you want to insert a tab character in your text, you can use the HTML entity 	 or the CSS property white-space: pre; .
 
This will preserve any white space characters, including tabs, in the paragraph element.
 
These are the various methods you can use to insert spaces or tabs in text using CSS padding and margins.
 
Method 4: CSS text-indent property
 
To insert spaces or tabs in text using CSS, you can use the text-indent property.
 
Steps:
 
 
Select the element that you want to apply the indentation to.
 
Use the text-indent property to specify the amount of indentation.
 
 
Example:
 
This will indent the first line of every paragraph by 50 pixels.
 
You can also use other units of measurement such as em, rem, or percentages.
 
This will indent the first line of every paragraph by 2 times the current font-size.
 
You can also use negative values to create a hanging indent.
 
This will indent every line in the paragraph except the first line by 20 pixels.
 
Источник
 
How TO — Tabs
 
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects:
 
London
 
London is the capital city of England.
 
Paris
 
Paris is the capital of France.
 
Tokyo
 
Tokyo is the capital of Japan.
 
Create Toggleable Tabs
 
Step 1) Add HTML:
 
Example
 
 
 
 
London
 
 
London is the capital city of England.
 
 
 
 
Paris
 
 
Paris is the capital of France.
 
 
 
 
Tokyo
 
 
Tokyo is the capital of Japan.
 
 
Create buttons to open specific tab content. All elements with class=»tabcontent» are hidden by default (with CSS & JS). When the user clicks on a button — it will open the tab content that «matches» this button.
 
Step 2) Add CSS:
 
Style the buttons and the tab content:
 
Example
 
/* Style the tab */
.tab overflow: hidden; 
border: 1px solid #ccc; 
background-color: #f1f1f1;
>
 
/* Style the buttons that are used to open the tab content */
.tab button background-color: inherit; 
float: left; 
border: none; 
outline: none; 
cursor: pointer; 
padding: 14px 16px; 
transition: 0.3s;
>
 
/* Change background color of buttons on hover */
.tab button:hover background-color: #ddd; 
>
 
/* Create an active/current tablink class */
.tab button.active background-color: #ccc;
>
 
/* Style the tab content */
.tabcontent display: none; 
padding: 6px 12px; 
border: 1px solid #ccc; 
border-top: none;
>
 
Step 3) Add JavaScript:
 
Example
 
function openCity(evt, cityName) <
// Declare all variables 
var i, tabcontent, tablinks;
 
 
// Get all elements with and hide them 
tabcontent = document.getElementsByClassName(«tabcontent»); 
for (i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none"; 
>
 
// Get all elements with and remove the class «active» 
tablinks = document.getElementsByClassName(«tablinks»); 
for (i = 0; i < tablinks.length; i++) tablinks[i].className = tablinks[i].className.replace(" active", ""); 
>
 
// Show the current tab, and add an «active» class to the button that opened the tab 
document.getElementById(cityName).style.display = «block»; 
evt.currentTarget.className += » active»;
>
 
Fade in Tabs:
 
If you want to fade in the tab content, add the following CSS:
 
Example
 
.tabcontent <
animation: fadeEffect 1s; /* Fading effect takes 1 second */
>
 
 
/* Go from zero to full opacity */
@keyframes fadeEffect from 
to 
>
 
Show a tab by default
 
To open a specific tab on page load, use JavaScript to «click» on the specified tab button:
 
Example
 
Close a tab
 
If you want to close a specific tab, use JavaScript to hide the tab with a click of a button:
 
Example
 
 
London
 
 
London is the capital city of England.
 
x 
 
Tip: Also check out How To — Vertical Tabs.
 
Источник
 
Читайте также:  Javascript system out print