Heim > Web-Frontend > HTML-Tutorial > 为什么padding和margin在span中不好用_html/css_WEB-ITnose

为什么padding和margin在span中不好用_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:24
Original
982 Leute haben es durchsucht

为什么padding和margin在span中不好用:
可能标题的问题并不被所有人认同,有的可能觉得padding和margin是好用的,而有的却认为是不好用的。下面通过实例分别介绍一下两个属性在span中到底好不好用。
一.padding属性:

<!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>
Nach dem Login kopieren

从以上代码可以看出第一个span设置的padding并没有完全正确的得到渲染,而是上边框无法显示,可能在某些浏览器中,下边框也不能显示。第二个span设置的左右内边距都是正常的。由此可以得出,默认状态下,span的左右内边距是好用的,上下内边距可能产生问题。

二.margin属性:

<!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>
Nach dem Login kopieren

其实margin和padding是一样的,也是左右外边距是有效的,上下外边距可能出现问题。解决这个问题的方法很简单,就是让span变为块级元素即可。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1889.html

最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4697

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage