Can I set vertical padding and vertical border for row elements? _ Css_WEB-ITnose/html

Source: Internet
Author: User
Can I set vertical padding and vertical border for row elements? In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
aaa


IE8 and FF:


IE6 and IE7:


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

Problem:
1. Can I set vertical padding and border for any Row Element?
2. How can this incompatible problem be solved?

Thank you!


Reply to discussion (solution)

1
1
1
1
1
aaa1
1
1
1
1

Check this effect.

HTML code

1
1
1
1
1

Aaa
1
1
1
1
1



Check this effect.
Not too clear ~ Why does the padding area cover 1, but not the following?

Change the padding of padding to Margin.

In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

Aaa



IE8 and FF:


IE6 and IE7:


IE8 and FF should be more compatible with w3c standards, but IE6 and IE ......
Vertical setting refers to up or down, and the above and below settings do not work.

fsfsfsfs

fsfsfsd


First, the line element and width
Width does not work
Span {
Width: 200px;
} Not changed

Second, the element and height in the row
Height does not work
Span {
Height: 200px;
}
No changes

Third: In-row elements and padding, margin
Span {
Padding: 200px;
}
Influence left and right, not affect up and down

Reference the reply from the author wsy87217:
In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

Aaa



IE8 and FF:


IE6 and IE7:


I ......
Positive Solution

In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

Aaa



IE8 and FF:


IE6 and IE7:


IE8 and FF should be more compatible with w3c standards, but IE6 and IE ......
Http://www.360doc.com/content/11/0329/20/5723046_105698266.shtml
Please refer to this for LZ ....

Reference the reply from the author wsy87217:
In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

Aaa



IE8 and FF:


IE6 and IE7:


I ......
In this example, the vertical direction of padding does not affect other elements?

Reference the reply from wangyao1135 on the 4th floor:

Reference the reply from the author wsy87217:
In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

Aaa



IE8 ......

fsfsfsfs

fsfsfsd




Only the text content of 2nd p elements is displayed. The text content of 1st p elements is blocked. Does this affect the upper and lower rows?

Reference the reply from athrunzero on the fifth floor:

Reference the reply from wangyao1135 on the 4th floor:

Reference the reply from the author wsy87217:
In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

The layout should not be affected here. Although the text is covered, the layout remains unchanged. if you remove the color. Layout unchanged

Reference the reply from athrunzero on the fifth floor:

Reference the reply from wangyao1135 on the 4th floor:

Reference the reply from the author wsy87217:
In the textbook, the vertical padding and vertical border settings of the row element are invalid.
However, I tried these effects:
HTML code

If it is a piece of text, you add a span tag in it and set its padding. It does not change the layout of the upper and lower layers. I have tested it...

If you want to set the width and height of the row elements to make them block-level elements, you can write "display: block;" in css.

Line element:
The specified width is invalid;
The height setting is invalid and can only be set through line-height;
Margin and padding have only the left and right effects, but not the upper and lower effects;
To achieve compatibility:
1) convert the line element into an inline block, namely: display: inline-block; then set the internal and external spacing;
2) The text layout can be set by text-align or vertical-align;

We all misunderstand what I mean, because the css standard is that the vertical direction of elements in the row set by padding is invalid, however, during the test, I found that the background color is slightly less influential-when setting the height and padding for the element in the row at the same time, the background color will overwrite the content of the above element, but removing the background color will not affect it.

Thank you! :)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.