Whether the vertical padding and margin of elements in the row in HTML are invalid.
Reference: Inline elements and padding
Today, when I wrote a navigation bar, I encountered a problem: Is it true that the padding-top, padding-bottom, margin-top, and margin-bottom of row elements are invalid?
Next, we will analyze the problem in detail:
1. Does the element in the row have a box model?The answer is yes. That's right. Line elements, like block-level elements, also have box models.
2. Whether the padding-top, padding-bottom, margin-top, and margin-bottom of row elements are invalidThe answer is yes. The width, height, padding-top, padding-bottom, margin-top, and margin-bottom settings of the box model are invalid. But...
3. Discuss the padding-top, padding-bottom, margin-top, and margin-bottom of row elements.Let's take a look at two instances:
Example1:Source code:
<! DOCTYPE html>
Effect (do not click the link to bring up the demo effect, the great God will ask for advice ):
View: the height of the parent element li and nav of link element a is 50px and both are white backgrounds. However, after setting the css style of a to padding: 30px, it is found that the height exceeds the white area (that is, 50px). According to the box model theory of the element in the row, it should be that padding-top and padding-bottom are invalid, but are they valid here? Let's look at another example:
Example2:
<!DOCTYPE html>Effect:
It's a strange phenomenon. I'm capturing another image. Everything else is the same, but the number of parts in test 1 is greatly increased:
Yes. For example, we can see that the margin set by span is indeed in line with the box model of the element. The horizontal margin is valid and the vertical margin is invalid, however, it seems that padding works both in both water and vertical directions, but let's take a closer look at the two diagrams of example1 and example2: example1, the padding-top and padding-bottom we set are equal. If the padding in the vertical direction is true, the font of the content should be centered. In example2, we ignore the existence of the border. We can see that the padding in the vertical direction does not have any effect, but the margin in the horizontal direction is valid. Therefore, the vertical padding of the element in the row is indeed invalid.
Looking at w3c official documents, I did not find an explanation of this strange phenomenon (I may be poor at English, but I did not find it). Later I found the answer in a foreigner's article:
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the element. As you can see, it has an affect on the content on each side, but not on content above or below
This section basically explains the above phenomenon. When we use the padding, only the left and right directions are valid. When we set the padding in four directions, the results are indeed displayed for the elements in the row, however, the padding in the vertical direction only has an effect and does not affect other elements.
Therefore, padding-top, padding-bottom, margin-top, and margin-bottom of the row elements are invalid, the content range of the element in the row is increased for the vertical padding, but it is only a representation and has no effect on the surrounding elements.
Reprinted please indicate the original address and reprint: http://www.cnblogs.com/mingjiezhang/p/5373667.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
