What are the points for attention of non-replacement elements in the HTML line
This article mainly introduces the relevant knowledge of "what are the points for attention of non-replacement elements in the HTML line". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope that this article "what are the points for attention of non-replacement elements in the HTML line" can help you solve the problem.
Attention points for inline non-replacement elements (padding, margin, and border)
1. The following attributes do not take effect on inline non-replacement elements
Width and height
Margin-top and margin-bottom (left and right margin can take effect normally)
two。 The following attributes have a special effect on non-replacement elements in the line
Padding-top and padding-bottom (left and right padding can take effect normally)
Sample code:
Span {
Padding-top: 8px
Padding-bottom: 8px
Background-color: red
}
Go to div
Span1
Span2
Lower div
Run result: the upper and lower padding set by span does not occupy space, so it will be extended to the upper and lower elements
Upper and lower border (left and right border can take effect normally)
Sample code:
Span {
Border-top: 8px solid green
Border-bottom: 8px solid green
Background-color: red
}
Go to div
Span1
Span2
Lower div
Run result: the upper and lower border set by span does not occupy space, so it will be extended to the upper and lower elements
This is the end of the introduction to "what are the points for attention to non-replacement elements in the HTML line". 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.