Home >Web Front-end >CSS Tutorial >What attribute is used to change the inner padding of an element in css
What attribute is used to change the inner padding of an element in css
- 青灯夜游Original
- 2021-12-09 14:10:414254browse
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.
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:上下左右的内填充;
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>
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>
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!