Can inline elements be set with vertical padding and vertical borders? _html/css_WEB-ITnose

The textbook states that setting vertical padding and vertical borders for inline elements is invalid.
But when I tried it, this was the effect:

<span style="background:red; border:5px solid blue; padding:100px;">aaa</span>

Under IE8 and FF:


Under IE6 and IE7:


IE8 and FF should be more in line with w3c standards, but IE6 and IE7 have the same effect as mentioned in the book ~

Questions:
1. Can vertical padding and border be set for inline elements?
2. How to solve this incompatibility problem?

Thank you!

Reply to discussion (solution)

1<br/>1<br/>1<br/>1<br/>1<br/><span style="background:red; border:5px solid blue; padding:50px;">aaa</span>1<br/>1<br/>1<br/>1<br/>1<br/>

Look at this effect

HTML code

1076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc81
af54dbed1760008814f99d95426c602caaa54bdf357c58b8a65c66d7c19c8e4d114
1076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc811076402276aae5dbec7f672f8f4e5cc81


Take a look at this effect
I don’t quite understand~ Why does the padding area above cover 1, but the padding area below does not?

Change the spacing of padding to Margin and try to see what effect it has.

The textbook says that setting vertical padding and vertical border for inline elements is invalid.
But when I tried it, this was the effect:
HTML code

1ffa8bf238c13e4751bee6b120499022aaa


Under IE8 and FF:


Under IE6 and IE7:


IE8 and FF should be more consistent with w3c standards , but IE6 and IE...
Setting vertical means up and down. Setting the upper and lower ones has no effect

<p>fsfsfsfs</p><p style="border:5px solid #900; padding:100px; background:#00F;"></p><p>fsfsfsd</p>

First: Inline elements and width
The width cannot be used Function
span {
width:200px;
} No change

Second: Inline elements and height
Height does not work
span{
height:200px ;
}
Useless changes

Third: Inline elements and padding, margin
span{
padding:200px;
}
Affects left and right, but not Up and down

Quoting the reply from the poster wsy87217:
The textbook states that setting vertical padding and vertical border for inline elements is invalid.
But when I tried it, this was the effect:
HTML code

1ffa8bf238c13e4751bee6b120499022aaa


Under IE8 and FF:


Under IE6 and IE7:


I...
Correct answer

The textbook states that setting vertical padding and vertical border for inline elements is invalid.
But when I tried it, this was the effect:
HTML code

1ffa8bf238c13e4751bee6b120499022aaa


Under IE8 and FF:


Under IE6 and IE7:


IE8 and FF should be more in line with w3c standards. , but IE6 and IE...
http://www.360doc.com/content/11/0329/20/5723046_105698266.shtml
LZ, please refer to this. . . .

Quoting the reply from the poster wsy87217:
The textbook states that setting vertical padding and vertical border for inline elements is invalid.
But when I tried it, this was the effect:
HTML code

1ffa8bf238c13e4751bee6b120499022aaa


Under IE8 and FF:


Under IE6 and IE7:


I...
This is your example , padding in the vertical direction, doesn’t it also affect other elements?

Quoting the reply from wangyao1135 on the 4th floor:

Quoting the reply from the poster wsy87217:
The textbook states that setting vertical padding and vertical border for inline elements is invalid.
But when I tried it, this was the effect:
HTML code

1ffa8bf238c13e4751bee6b120499022aaa


IE8...

<p style="background:yellow;">fsfsfsfs</p><span style="border:5px solid #900; padding:100px; background:#00F;"></span><p style="background:yellow;">fsfsfsd</p>

Only the text content of the 2nd p element is displayed, and the text of the 1st p element is displayed The content is blocked. Doesn’t this affect upstream and downstream traffic?

Quoting the reply from athrunzero on the 5th floor:

Quoting the reply from wangyao1135 on the 4th floor:

Quoting the reply from the poster wsy87217:
The textbook talks about setting vertical padding and vertical for inline elements. border is invalid.
But when I tried it, this was the effect:
HTML code

Quote from athrunzero on the 5th floor:

Quote 4 Lou wangyao1135’s reply:

Quoting the poster wsy87217’s reply:
The textbook states that setting vertical padding and vertical border for inline elements is invalid.
But when I tried it, these were the results:
HTML code

If you want to set the width and height of inline elements to make them block-level elements, just write display:block; in css

Inline elements:
Setting the width is invalid;
Setting the height is invalid and can only be set through line-height;
Margin and padding only have effects on the left and right, not up and down;
If you want to achieve compatibility effects:
1 ) Convert inline elements into inline blocks, that is: display:inline-block; and then set the internal and external spacing;
2) Through the line height, the text layout can be set using the text-align or vertical-align attributes;

Everyone misunderstood what I meant, because the CSS standard is that padding is invalid when setting the vertical direction of inline elements. However, when I tested it, I found that it still had little impact - when setting height and padding for inline elements at the same time, the background The color will cover the content of the above element, but eliminating the background color will not affect it.

Thank you everyone! :)