Home > Article > Web Front-end > Introduction to padding properties in css [detailed explanation of examples]

Introduction to padding properties in css [detailed explanation of examples]

藏色散人Original: 2018-08-31 11:17:443387browse

When we lay out the front-end page, the role of css inner and outer margin attributes is extremely important. Only by making full use of css inner and outer margin attributes, that is, css padding and margin style attributes, can we design a good-looking front end. page. So in my previous article [What are the margin properties of css? What are their uses? ] has given you a detailed introduction to the specific use of the css margin attribute. This article will continue to introduce to you the specific use of css padding inner margin attribute!

Below we will explain it one by one through specific code examples.

Here is a sectioncss padding attributeThe sample code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>csspadding属性使用示例</title>
    <style>
div{
    width: 400px;
    height: 80px;
    border:2px solid red;
    margin-top: 10px;
}
        .p1{padding: 10px;}
        .p2{padding: 20px 30px;}
        .p3{padding:10px 5px 15px 20px;}
     </style>
</head>
<body>
<div class="p1">
    <p>css padding内边距属性示例1-给此段文字添加了padding:10px;的样式。</p>
</div>
<div class="p2">
    <p>css padding内边距属性示例2-给此段文字添加了padding:20px 30px;的样式。</p>
</div>
<div class="p3">
    <p>css padding内边距属性示例3-给此段文字添加了padding:10px 5px 15px 20px;的样式。</p>
</div>
</body>
</html>

The effect of the above code is as follows:

Introduction to padding properties in css [detailed explanation of examples]

First of all, we need to know that padding represents the blank distance between the element and its border. Then let's look at the picture above. We set the padding 10px style attribute for the text in the div block p1, which increases the distance between this text and the red borders on all four sides by 10 pixels. Then we added padding: 20 30px; style attributes to p2, which means that the top and bottom margins of the text field are 20px; the left and right margins are 30px.

Let’s continue to look at the padding: 10px 5px 15px added in p3 The style attributes of 20px; here respectively indicate that the top padding of this text is 10px, the right padding is 5px, the bottom padding is 15px, and the left padding is 20px.

The top, bottom, left, and right padding settings here can also be written separately, such as padding-top, padding-left, padding-bottom, and padding-right.

Note: CSS style inner margin padding cannot be set to negative values!

The above is an introduction to the specific usage of the padding attribute in css! Hope it helps those in need!

The above is the detailed content of Introduction to padding properties in css [detailed explanation of examples]. For more information, please follow other related articles on the PHP Chinese website!

css 外边距内边距 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：How does the css overflow property implement scroll bar setting and hiding scroll bars?Next article：How does the css overflow property implement scroll bar setting and hiding scroll bars?

See more

Introduction to padding properties in css [detailed explanation of examples]

Related articles