Home > Web Front-end > CSS Tutorial > div word spacing - how to set the spacing between text within a div

div word spacing - how to set the spacing between text within a div

云罗郡主
Release: 2018-11-22 16:00:22
forward
13280 people have browsed it

The content of this article is about div word spacing - how to set the spacing between text within div. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Can the spacing between words within a div be achieved using CSS code?

Answer: You can use css to implement div word spacing layout. Word code for CSS word spacing: letter-spacing

1, syntax:

letter-spacing:3px - Set the object word spacing to 3px.

2. Set uniform word spacing for all divs

div{letter-spacing:2px}
Copy after login

This means setting the distance between words in all div tags in HTML to be uniformly 2px.

3. Setting the word spacing for the specified div

.zjj{letter-spacing:4px}
Copy after login

In this way, the CSS selector specifies that the text in the object with class=zjj is set to 4px, and the div, p, span, h1 and other tags You can use class to set the character spacing within the object.

4. div example code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对象内字间距设置实例</title>
<style>
.sli{ letter-spacing:3px}
</style>
</head>
<body>
<div>这里div内文字间距正常</div>
<div class="sli">这里div使用class=sli设置letter-spacing:3px样式,所以字间距为3px</div>
</body>
</html>
Copy after login

The above html css example code can be directly copied and used to observe the example effect.

5. Screenshots of div examples

div word spacing - how to set the spacing between text within a div

The above is a complete introduction to the div word spacing - the setting method of the spacing between text within the div. If you want to know more For more CSS3 tutorials, please pay attention to the PHP Chinese website.


The above is the detailed content of div word spacing - how to set the spacing between text within a div. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:thinkcss.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template