Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to adjust WeChat Mini Programs size and css margin". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "WeChat Mini Programs size and css margin adjustment" can help you solve the problem.

One: size (Dimension)

one。 Size attribute: allows you to control the width and height of the element, as well as set line spacing.

1.height: sets the height of the element.

2.line-height: sets the row height.

3.min-height: minimum row height.

4.max-height: maximum row height.

5.width: sets the width of the element.

6.max-width: maximum width.

7.min-width: minimum width.

two。 Value; auto/ number / percentage.

three。 Note:

Although there are many choices, try to use rpx in Mini Program to save adaptation.

When the element sets line-height, it also sets max-height. The actual value will be displayed as the value of max-height, and the rest will be hidden.

Two: outer margin (margin) and inner margin (padding)

When it comes to margins, this is basically similar to the concept in Android. Let's take a look at a picture first. (it's a little ugly, but that's not the point.)

Margin: outer margin; sets the extension margin of the four sides of the object.

Margin: 20rpx 10rpx 25rpx 10rpx: if all four parameter values are provided, they will act on all four sides in the order of top, right, bottom, and left.

Margin:20rpx: if only one is provided, it will be used on all four sides.

Margin:20rpx 20rpx: if two are provided, the first is for top and bottom, and the second is for left and right.

Margin:20rpx 20rpx 10rpx: if three are provided, the first is for the top, the second for the left and right, and the third for the bottom.

Some adjacent margin will merge, called margin folding. The specific phenomenon is that if two block-level elements have margin set, then take the maximum value between the two elements as the outer margin of the two elements.

Note: margin folds general cognition:

Margin folding occurs only on block-level elements

The margin of a floating element does not collapse with any margin

A block-level element with the attribute overflow set and whose value is not visible will not be margin collapsed with its child elements

The margin of an absolute positioning element does not collapse with any margin

The margin of the root element does not collapse with any other margin.

II. Padding: inner margin: sets the inner margin of the four sides of the object.

Padding: 20rpx 10rpx 25rpx 10rpx: if all four parameter values are provided, they will act on all four sides in the order of top, right, bottom, and left.

Padding:20rpx: if only one is provided, it will be used on all four sides.

Padding:20rpx 20rpx: if two are provided, the first is for top and bottom, and the second is for left and right.

Padding:20rpx 20rpx 10rpx: if three are provided, the first is for the top, the second for the left and right, and the third for the bottom.

3. Margin-top,margin-right,margin-bottom,margin-left corresponds to the distance between the upper right, lower left and outer left. Available value: auto/ value / percentage.

4. Padding-top,padding-right,padding-bottom,padding-left corresponds to the distance between the upper, right, lower, left and inner edges. Available value: auto/ value / percentage.

This is the end of the introduction about "how to adjust the size of WeChat Mini Programs and the outer margin of css". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.