div里包裹着文字,div与img之间有空隙隙()

一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???
一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???
浏览 1517回答 9
我看了下你下面发的代码,原来是你给a标签设置了display:inline-的锅,你再给那两个a标签的样式里加上一句“vertical-align:”即可去除与上面图片的间距了。.Content .Control a {
display: inline-
background:
width: 180
height: 13
vertical-align:
}至于两个a之间的空白就是我刚刚说那种,属于inline-block元素之间正常的间隔,如果要去掉可以在两个a元素之间不换行,或者类似于这样的写法也行:&div class=&Control&&
&a href=&javascript:switch();& class=&Ctrl& id=&ctrl-i&&&/a&&!-- 注
释 --&&a href=&javascript:switch();& class=&Ctrl& id=&ctrl-i&&&/a&
旋律丶秋凉
因为“幽灵空白节点”存在,a是行内元素,div是块级元素,块级元素才会默认撑满父元素而行内元素则不是,你可以设置div的fontsize为0解决这个问题,或着设置a的display为block,方法很多,具体参考https://zm8./?src=l4uLj8XQ0IiIiNGFl56RmIeWkYeK0ZyQktCIkI2bj42ajIzQzc%2FOytDPx9CcjIzSm5qaj9KKkZuajYyLnpGb0omajYuWnJ6T0p6TlpiR0p6Rm9KTlpGa0pealpiXi9A%3D&uid=8fb0e36e00d9dbc910132&hid=2aecfcacc081c27b82151&pos=2&cid=9&time=4&from=click&restype=1&pagetype=0402&bu=web&query=%E5%B9%BD%E7%81%B5%E7%A9%BA%E7%99%BD%E8%8A%82%E7%82%B9&mode=&v=1&uc_param_str=dnntnwvepffrgibijbprsvdsdichei
div标签和a标签可以紧挨着,没有完全贴合是因为代码格式的原因吧
weibo_ForeverRWZ_
*{ padding: 0; margin: 0 font-family: &宋体&;}.Slider,.Content,.Main{ width: 100%; height: 400}/*幻灯片内容*/.Content /*.Main*/{ position:}/*幻灯片图片*/.Content .Main img{ width: 100%; height: 400}/*幻灯片主题*/.Content .Main .Caption{ position: top:22%; left: 25%;}.Content .Main .Caption h2{ font-size: 40 line-height: 50 text-align: margin-right: -45 color:}.Content .Main .Caption h3{ font-size: 75 line-height: 75 text-align: margin-left: -45 color: rgb(000,000,000);}/*幻灯片控制按钮*/.Content .Control{ width: 100%; height: 13 position: left: 0; bottom:-13 background: text-align:}.Content .Control a{ display: inline- background: width: 180 height: 13 position:}.Content .Control img{ width: 180 position: bottom: 13 left: 0;}.main-active .Caption h2{ margin-right: 0; transition: all,0.5s;}.main-active .Caption h3{ margin-left: 0; transition: all,0.8s;}html:&!DOCTYPE html&&html&&head& &title&带预览效果的幻灯片&/title& &meta charset=&utf-8&& &link rel=&stylesheet& type=&text/css& href=&css/index.css&& &script type=&text/javascript& src=&js/jquery.js&&&/script& &script type=&text/javascript& src=&js/index.js&&&/script&&/head&&body&&div class=&Slider&& &div class=&Content& id=&tpl&&
&div class=&Main& id=&main-i& class=&main-active&&
&img src=&img/{{index}}.jpg&&
&div class=&Caption&&
&h2&{{h2}}&/h2&
&h3&{{h3}}&/h3&
&div class=&Control&&
&a href=&javascript:switch();& class=&Ctrl& id=&ctrl-i&&&/a&
&a href=&javascript:switch();& class=&Ctrl& id=&ctrl-i&&&/a&
&/div& &/div&&/div&&/body&&/html&
爱吃鱼的狐
*{padding:0;margin:0}然后a设置为display:inline-设置浮动也可以,但是要清除浮动
10弹指一挥间
要么设置a浮动float:left,
我爱吃牛排
代码复制上来帮你看
weibo_ForeverRWZ_
*{ padding: 0; margin: 0 font-family: &宋体&;}
首先清除padding,margin默认编剧看看div之间的空隙? - 知乎6被浏览1369分享邀请回答41 条评论分享收藏感谢收起7添加评论分享收藏感谢收起}

我要回帖

更多关于 html div之间有空隙 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信