Why padding and margin do not work well in span:
Perhaps the title of the problem is not recognized by all, some may feel that padding and margin is good to use, while others think it is not useful. The following is an example of how the two properties in span are really good.
One. Padding properties:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>CSS Tutorials</title><styletype= "Text/css">span{Border:1px solid Red;}. First{padding:20px;}. Second{Padding-left:20px;Padding-right:20px;}</style></Head><Body> <spanclass= "First">Ant Tribe</span> <spanclass= "Second">Ant Tribe</span></Body></HTML>
From the above code you can see that the first span set of padding is not completely correct to get rendered, but the upper border can not be displayed, and in some browsers, the bottom of the box can not be displayed. The left and right padding of the second span setting is normal. It can be concluded that by default, the left and right padding of the span is useful, and the upper and lower padding may cause problems.
Two. Margin properties:
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.51texiao.cn/" /><title>CSS Tutorials</title><styletype= "Text/css">Div{width:200px;Height:100px;Border:1px solid Blue;}span{Border:1px solid Red;}. First{margin:20px;}. Second{Margin-left:20px;Margin-right:20px;}</style></Head><Body> <Div><spanclass= "First">Ant Tribe</span></Div> <Div><spanclass= "Second">Ant Tribe</span></Div></Body></HTML>
In fact, margin and padding are the same, but also the left and right margin is effective, up and down the margin may be problematic. The solution to this problem is simply to make span into a block-level element.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1889.html
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4697
Why padding and margin are not useful in span
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
