Under what circumstances are padding and margin of inline elements invalid?

This time I will bring you the circumstances under which inline elements padding and margin are invalid, and under what circumstances the use of inline elements padding and margin are invalid. What are the precautions? What are the practical cases below? Let’s take a look together. take a look.

The vertical padding and margin of inline elements are not considered, which is defined by the CSS specification. The inline element can indeed set the padding and margin values ​​in the vertical direction, but the margin and padding of the inline element There is no margin effect in the vertical direction, that is, it does not affect the layout.

1. First, does the inline element have a box model?
Answer: Inline elements also have a box model.

2. Are the padding and margin of inline elements invalid?
Answer:

• The padding-top, padding-bottom, margin-top, margin-bottom attribute settings of inline elements are Invalid;

• The padding-left, padding-right, margin-left, and margin-right attribute settings of inline elements are valid;

• The padding-top and padding-bottom of the inline elements are increased from the display effect, but in fact the settings are invalid. It will not have any effect on the elements around him.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Initializing the project structure in the front-end project

vue-cli generates test packages and production packages according to the environment

The above is the detailed content of Under what circumstances are padding and margin of inline elements invalid?. For more information, please follow other related articles on the PHP Chinese website!