Adding tab space using padding property

By using padding property we can give any amount of spaces in any direction of an element (i.e, top, right, bottom, left) from the border of the element. Here we only deal with the spaces so we need only two padding property i.e, padding-left and padding-right.

Adding tab space using padding property Syntax:

padding-left : value;
or
padding-right : value;

Adding tab space using padding property Example:

Here we are using the padding property to add tab spaces.

html

<!DOCTYPE html> 
<html> 
 
<head> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
    <style> 
        div { 
            width: 300px; 
            height: 100px; 
            background-color: red; 
        } 
         
        P { 
            width: 100px; 
            height: 100px; 
            background-color: green; 
            text-align: center; 
            font-weight: bold; 
        } 
    </style> 
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                $("#demo").css("padding-left", "30px"); 
            }); 
        }); 
    </script> 
</head> 
 
<body> 
 
    <div id="demo"> 
 
        <p> Block 1 </p> 
 
        <button>Submit</button> 
    </div> 
 
</body> 
 
</html>

Output :

Using Padding

Explanation:

In this example we ncludes a div element with an embedded paragraph and a button.
jQuery is used to respond to the button click event.
Upon clicking the button, jQuery modifies the left padding of the paragraph.
This action dynamically changes the appearance of the paragraph within the red-colored div.

How to tab space instead of multiple non-breaking spaces (nbsp)?

Tab space instead of multiple non-breaking spaces refers to using the tab key for indentation or spacing within text, rather than inserting multiple non-breaking space entities (nbsp) to achieve the same visual effect, which can be cumbersome and less efficient.

We can the <pre> tag or CSS properties like inline block, padding, and margin to display text with consistent spacing instead of relying on multiple non-breaking spaces (nbsp) for indentation.

Table of Content

Adding tab space using a pre tag
Adding tab space using inline-block
Adding tab space using padding property
Adding tab space Using margin property

Tags:

#HTML-Misc #HTML #Web Technologies

Adding tab space using inline-block

Adding tab space Using margin property