First on Demo:
Style sheet
<style type= "Text/css" >*{padding:0;margin:0;}. inline{border:1px solid red;padding:20px;} </style>HTML code 1:
<body> <span class= "inline" >span</span> <span class= "inline" >span</span> <span class= "inline" >span</span></body>
HTML code 2
<body><input type= "text" class= "inline" value= "input"/><input type= "text" class= "inline" value= "input "/> <input type=" text "class=" inline "value=" input "/></body>
Please use the same style sheet to run the above two pieces of code, you will find a problem: span padding-top Although set, but in the browser does not show, WTF!
So the question is, some say the inline element cannot set padding-top, but
1. Both span and input are inline elements, why is the Padding-top value set for input valid?
2. The Http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties document
' Padding-top ', ' padding-right ', ' padding-bottom ', ' padding-left '
| Value: | <padding-width> | Inherit |
| Initial: | 0 |
| applies To: | All elements except Table-row-group, Table-header-group, Table-footer-group, Table-row, Table-column-group and Table-column |
| inherited: | No |
| percentages: | Refer to width of containing block |
| Media: | Visual |
| Computed Value: | The percentage as specified or the absolute length |
padding applies to all elements.
When you set margin-top for these two elements, the performance of the two is completely different.
span is not valid for margin-top, and input is completely OK for the Margin-top setting? Why? Read the document
' Margin-top ', ' Margin-bottom '
| Value: | <margin-width> | inherit |
| Initial: | 0 |
| applies To: | all elements except elements with table display Typ Es other than table-caption, table and inline-table |
| inherited: /td> | no |
| percentages: | Refer to width of containing blo CK |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length |
These properties has no effect on non-replaced inline elements.
So what is this for? Here's the point,
Span is a non-replaceable element in the row, and input is an inline substitution element, the first time you hear it, and cry.
First on the document:
10.6.1 Inline, non-replaced elements
The ' height ' property is does not apply. The height of the content area should is based on the font, but this specification does not specify how. A UA may, e.g, use the em-box or the maximum ascender and descender of the font. (the latter would ensure that glyphs with parts above or below the Em-box still fall within the content area, but leads to Differently sized boxes for different fonts; The former would ensure authors can control background styling relative to the ' line-height ' and leads to glyphs painting Outside their content area.)
Note:level 3 of CSS would probably include a property to select which measure of the font are used for the content height.
the vertical padding, border and margin of a inline, non-replaced box start at the top and bottom of the content area , and has no to does with the ' Line-height '. But only the ' Line-height ' was used when calculating the heightof the line box.
If more than one font was used (this could happen when glyphs be found in different fonts), the height of the content area Is isn't defined by this specification. However, we suggest the height is chosen such the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this is larger than any of the font sizes involved, depending on the baseline alignment of the fonts.
10.3.2 Inline, replaced elements
A computed value of ' auto ' for ' margin-left ' or ' Margin-right ' becomes a used value of ' 0 '.
If and ' width ' both has Computed values of ' auto ' and the element also have an intrinsic width, then that intrinsic width is the used value of ' width ' .
If ' height ' and ' width ' both have computed values of ' auto ' and the element had no intrinsic WI DTH, but does has an intrinsic height and intrinsic ratio; Or if ' width ' has a computed value of ' auto ', ' height ' have some other computed value, and the element does ES has an intrinsic ratio; Then the used value of ' width ' is:
(used height) * (intrinsic ratio)
If ' height ' and ' width ' both have computed values of ' auto ' and the element had an intrinsic ratio but no intrins IC height or width, then the used value of ' width ' is undefined in CSS 2.1. However, it's suggested that, if the containing block's width does not itself depend on the replaced element ' s width, the n The used value of ' width ' is calculated from the constraint equation used for block-level, non-replaced elements in norm Al Flow.
Otherwise, if ' width ' has a computed value of ' auto ', and the element has a intrinsic width, then that intrinsic Width is the used value of ' width '.
Otherwise, if ' width ' had a computed value of ' auto ', but none of the conditions above is met, then the used Val UE of ' width ' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that have a 2:1 ratio and fits th e device instead.
Note the bold content, replaceable elements that have internal width, height, or aspect ratio.
Summarize:
For this substitution element of input, the margin and padding all have a role to play,
For these non-replaceable elements such as span,a,
Padding-left,padding-right all have effect, padding-top no effect.
In the comments @meta-D reminders, after the validation, Padding-bottom invalid, only to border style has affected. See the review for a map.
Margin-right,margin-left all have effect, margin-top,margin-bottom no effect.
4.16 Update:
Recently, when looking at the CSS authoritative guide, the book reads: The padding of non-replacement elements, the borders and margins have no vertical effect on the inline elements and their generated boxes, that is, they do not affect the height of the inline box. (still have to read a lot.)
Always feel the article written dabbler, first of all, we can look at the following link, and so I dig deeper dig a hole.
RELATED LINKS ( requires stairs to cross high walls ):
http://maxdesign.com.au/news/inline/
Http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element
http://melon.github.io/blog/2015/03/07/inline-replaced-vs-inline-nonreplaced/
Http://reference.sitepoint.com/css/replacedelements
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
