Adding tab space Using margin property

Adding tab space using padding property

Using margin 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 margin property i.e, margin-left and margin-right.

Adding tab space Using margin property Syntax:

 margin-left : value;
or
margin-right : value;

Adding tab space Using margin property Example:

Here we are using margin 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("margin-left", "60px"); 
            }); 
        }); 
    </script> 
</head> 
 
<body> 
 
    <div> 
 
        <p id="demo"> Block 1 </p> 
 
        <button>Submit</button> 
    </div> 
 
</body> 
 
</html> 

Output :

using margin

Explanation:

In this example we Contains a div element with a green paragraph inside.
on button click, jQuery modifies the left margin of the paragraph.
Shifts the paragraph 60 pixels to the right.
using CSS for div and paragraph appearance, and jQuery for dynamic adjustment.

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