What attribute is used to change the inner padding of an element in css-CSS Tutorial-php.cn

What attribute is used to change the inner padding of an element in css

青灯夜游

Release： 2021-12-09 14:10:41

Original

4282 people have browsed it

To change the padding of an element in css: 1. The padding attribute can change the top, bottom, left and right padding of the element at the same time; 2. The padding-top, padding-bottom, padding-left and padding-right attributes, respectively Change the padding of the top, bottom, left and right of the element.

What attribute is used to change the inner padding of an element in css

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

Change the inner padding of elements in css

1. Use the padding attribute directly

padding Property is a shorthand property that defines the space between the element's border and its content, i.e. the top, bottom, left and right padding.

Grammar:

padding:上内填充 右内填充 下内填充 左内填充;

padding:上内填充 左右内填充 下内填充;

padding:上下内填充 左右内填充;

padding:上下左右的内填充;

Copy after login

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>

<body>
<p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
<p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米，左右的填充边距为3厘米。</p>
</body>
</html>

Copy after login

What attribute is used to change the inner padding of an element in css

2. Use padding-top, padding-bottom, padding-left and padding-right attributes

##padding-top: Set the top padding of the element
padding-bottom: Set the element The bottom padding
padding-left: Sets the left padding of the element
padding-right: Sets the right padding of the element

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

			p.ex2 {
				padding-bottom: 15px;
			}
			p.ex3 {
				padding-left: 15px;
			}
			p.ex4 {
				padding-right: 15px;
			}
		</style>
	</head>

	<body>
		<p class="ex1">文本上填充15px。</p>
		<p class="ex2">文本下填充15px。</p>
		<p class="ex3">文本左填充15px。</p>
		<p class="ex4">文本右填充15px。</p>
	</body>
</html>

Copy after login

What attribute is used to change the inner padding of an element in css

css video tutorial）

The above is the detailed content of What attribute is used to change the inner padding of an element in css. For more information, please follow other related articles on the PHP Chinese website!