Home > Article > Web Front-end > Why padding and margin are not easy to use in span_html/css_WEB-ITnose
Why padding and margin are not easy to use in span_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:24945browse
Why padding and margin are not easy to use in span:
Maybe the title problem is not recognized by everyone. Some may think padding and margin are easy to use, while others do not. I think it is not useful. The following uses examples to introduce whether the two attributes are easy to use in span.
1.padding attribute:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>CSS教程</title><style type="text/css">span{ border:1px solid red;}.first{ padding:20px;}.second{ padding-left:20px; padding-right:20px;}</style></head><body> <span class="first">蚂蚁部落</span> <span class="second">蚂蚁部落</span></body></html> As can be seen from the above code, the padding set by the first span is not rendered completely correctly. But the upper border cannot be displayed, and maybe in some browsers, the lower border cannot be displayed either. The left and right padding settings of the second span are normal. It can be concluded that by default, the left and right padding of span are easy to use, but the top and bottom padding may cause problems.
2. Margin attribute:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /><title>CSS教程</title><style type="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><span class="first">蚂蚁部落</span></div> <div><span class="second">蚂蚁部落</span></div></body></html> In fact, margin and padding are the same, and the left and right margins are valid, as well as the top and bottom margins There may be a problem with the distance. The solution to this problem is very simple, just make span 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