Home > Article > Web Front-end > What are the attributes of whitespace before CSS text?

What are the attributes of whitespace before CSS text?

青灯夜游Original: 2022-09-16 18:45:112138browse

The attributes of white space before CSS text include: 1. margin-left attribute, which can set the left margin of text elements. The syntax is "text element {margin-left: margin value;}"; 2. padding The -left attribute can set the left inner margin of the text element, the syntax is "text element {padding-left: margin value;}"; 3. The text-indent attribute can specify the indentation of the first line of text in the text block, the syntax "Text element {text-indent: indent value;}".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are three attributes to implement the white space before CSS text:

margin-left
##padding -left
text-indent

1、margin-left

margin-left attribute You can set the left margin of text elements.

ValueDescription##length%Example:


Definition fixed left margin. The default value is 0.
Defines the left margin as a percentage based on the total width of the parent object.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				margin-left: 2cm;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定外边距大小的段落。</p>
		<p class="ex1">一个左外边距为2厘米的段落。</p>
		<p>一个没有指定外边距大小的段落。</p>

	</body>
</html>

What are the attributes of whitespace before CSS text? ##2、padding-left

The padding-left property sets the left padding (padding) of text elements.

ValueDescription##length%Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				padding-left: 2cm;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定内边距大小的段落。</p>
		<p class="ex1">一个左内边距为2厘米的段落。</p>
		<p>一个没有指定内边距大小的段落。</p>

	</body>
</html>


specifies Fixed left padding value in specific units, such as pixels, centimeters, etc. The default value is 0px.
Defines a percentage left padding based on the width of the parent element. This value will not work as expected in all browsers.

##3、text-indent

What are the attributes of whitespace before CSS text?

The text-indent attribute specifies the indentation of the first line of text in a text block.

Note: Negative values are allowed. If the value is negative, indent the first line left.

Value

Description##lengthDefinition fixed of indentation. Default value: 0. % Defines the indent based on a percentage of the parent element's width. Example:



	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{ border: 1px solid red; } p.ex1 { text-indent:50px; } </style> </head> <body> <p>一个没有指定首行缩进的段落。</p> <p class="ex1">首行缩进段落50像素。</p> <p>一个没有指定首行缩进的段落。</p> </body> </html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				text-indent:50px;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定首行缩进的段落。</p>
		<p class="ex1">首行缩进段落50像素。</p>
		<p>一个没有指定首行缩进的段落。</p>

	</body>
</html>

(Learning video sharing:

css video tutorial

webfrontend What are the attributes of whitespace before CSS text? )

The above is the detailed content of What are the attributes of whitespace before CSS text?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 Length 对象外边距内边距 margin padding

Statement：

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

Previous article：Can css load images?Next article：Can css load images?

See more

What are the attributes of whitespace before CSS text?

Related articles