📜  如何使用 HTML/CSS 在文本中插入空格/制表符?

📅  最后修改于: 2022-05-13 01:56:44.351000             🧑  作者: Mango

如何使用 HTML/CSS 在文本中插入空格/制表符?

可以通过 3 种方法使用 HTML 和 CSS 添加间距:

方法一:使用为不同空格指定的特殊字符

 字符实体用于表示一个不间断的空间,它是一个固定的空间。这可能被认为是正常空间的两倍。它用于在一行中创建一个不能被自动换行打破的空格。

用于表示“en”空间的字符实体,表示当前字体的半磅大小。这可能被认为是正常空间的两倍。

用于表示“em”空间的字符实体,表示等于当前字体的磅值。这可能被认为是正常空间的四倍。

句法:

Regular space:  
Two spaces gap:  
Four spaces gap:  

例子:




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


    

GeeksforGeeks

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

This is a   regular space.

    

This is a   two spaces gap.

    

This is a   four spaces gap.

在上面的代码中,常规空格和两个空格和四个空格的代码是不可见的,所以这是它的外观


输出:
慈善机构

方法二:使用 tab-size 属性设置制表字符间距

tab-size CSS 属性设置每个制表字符将显示的空格数。更改此值允许在一个制表字符上插入所需的空间量。但是,此方法仅适用于预先格式化的文本(使用

 标签)。

可以通过按住 Alt 并同时按 0 和 9 来插入制表字符。

句法:

.tab {
        tab-size: 2;
    }

例子:




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


    

GeeksforGeeks

    How to insert spaces/tabs in text using HTML/CSS?            
This is a    tab    with 2 spaces.
    
This is a    tab    with 4 spaces.
    
This is a    tab    with 8 spaces.

输出:
制表符长度空间

方法3:使用CSS创建一个新的间距类

可以创建一个新类,通过使用 margin-left 属性给出一定的间距。空间量可以由此属性中指定的像素数给出。

display 属性也设置为 'inline-block' 以便在元素之后不添加换行符。这允许空间位于文本和其他元素旁边。

句法:

.tab {
    display: inline-block;
    margin-left: 40px;
}

例子:




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


    

GeeksforGeeks

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

This is atab space in the document.

输出:
边距左空间

HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照本 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础,通过样式化网站和 Web 应用程序用于网页开发。您可以按照本 CSS 教程和 CSS 示例从头开始学习 CSS。