Get the App
SLTechnology News&Howtos  ›  Development  › 

How to change the inner filling of elements in css

Shulou Source: shulou.com Published: 2022-06-02 07:16:52 10月03日 Update

This article focuses on "how to change the inner filling of elements in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to change the filling of elements in css.

Change the inner filling of the element in css: 1, padding attribute, you can change the inner filling of the upper and lower left and right of the element at the same time; 2, padding-top, padding-bottom, padding-left and padding-right attribute, change the inner filling of the upper and lower side of the element, respectively.

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

Change the inner filling of elements in css

1. Use the padding attribute directly

The padding attribute is an abbreviated attribute that defines the space between the element border and the element content, that is, the inner padding from top to bottom.

Syntax:

Padding: upper inner filling, right inner filling, lower inner filling, left inner filling; padding: upper inner filling, left inner filling; padding: upper inner filling, left inner filling; padding: upper and lower inner filling.

Example:

P.ex1 {padding:2cm;} p.ex2 {padding:0.5cm 3cm;} the padding margins on both sides of this text are the same. The filling margin of each side is 2 cm.

The top and bottom fill margins of this text are both 0.5cm, and the left and right fill margins are 3cm.

2. Use the padding-top, padding-bottom, padding-left and padding-right properties

Padding-top: sets the top fill of an element

Padding-bottom: sets the bottom fill of an element

Padding-left: sets the left fill of the element

Padding-right: sets the right fill of the element

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 } fill the text with 15px.

Fill in 15px under the text.

The left side of the text is filled with 15px.

Fill in 15px to the right of the text.

At this point, I believe you have a deeper understanding of "how to change the inner filling of elements in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Tags: Elements attributes text up and down left and right content bottom top learning practical deeper between interest at the same time practical easy to operate tutorials methods more Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno MariaDB Shulou Technology Shulou Tech Info Xiaomi vpn