• 技术文章 >web前端 >前端问答

    css怎么让字之间的间隔变大

    青灯夜游青灯夜游2021-09-03 16:27:01原创888

    在css中,可以利用letter-spacing属性来让字之间的间隔变大,只需要给包含文字的容器元素添加“letter-spacing:间距值;”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css让字之间的间隔变大

    在css中,可以利用letter-spacing属性来让字之间的间隔变大。对于这个属性来说:每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”!

    示例:letter-spacing属性让字之间的间隔变大

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css letter-spacing属性设置字间隔</title>
    		<style>
    			.demo {
    				height: 100px;
    				margin: 10px 0;
    				border: 1px solid red;
    			}
    
    			.spacing {
    				letter-spacing: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="demo">
    			<p>hello,你好呀!</p>
    			<p>ab cd 你好00)!</p>
    		</div>
    		<div class="demo">
    			<p class="spacing">hello,你好呀</p>
    			<p class="spacing">ab cd 你好00)!</p>
    		</div>
    	</body>
    </html>

    效果图:

    1.png

    说明:

    letter-spacing 属性增加或减少字符间的空白(字符间距),该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。

    可以设置的属性值:

    描述
    normal默认。规定字符间没有额外的空间。
    length定义字符间的固定空间(允许使用负值)。

    推荐学习:CSS视频教程

    以上就是css怎么让字之间的间隔变大的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 字间隔
    上一篇:javascript 有map吗 下一篇:css怎么改行元素为块元素
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 如何用HTML和CSS制作玻璃/模糊效果?• 利用css制作有趣的文字摆动动画特效• 教你使用css3给字体添加立体效果(附代码)• 使用CSS快速更改PNG图像的颜色(两种方法)
    1/1

    PHP中文网