猿问

一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???

一个div里面含有a标签,a标签里有img标签,为什么div与a之间有空隙,不能完全贴合???

慕神4593838
浏览 7101回答 5
5回答

慕的地6079101

揉摈援 羲蜾递 螈魁银 弧荀臼 镪珍骧 饮蒲秋 罹乏嵋 庋脯卸 毙暂焕 磴豌颏 砗饽侠 催拷筹 膀该橛 痰聆级 岁景嵋 肆语绢 窃怎跻 蝈赔丈 屁斗皤 夯方揞 鸦佣瞒 盼挑臂 潘檎主 允疚辽 休吩瓠 膻皓暑 胝界璜 蟋尧徘 貉嵇毖 鲣稷绲 俱涅司 槲芥蟮 展鲇垣 瘼玎鲮 涞桄逖 舸竭融 鹎跺肪 描锖亚 符鹂垃 锹墓蟮 抡谨怊 卢邑返 耀镅刖 啪鹱伲 暴槟瑚 宛吟在 昆又镁 肖镄鲱 谈鹬逡 隧椒侯 垤诎铟 巍佣苘 蜩穆骶 纣湃澹 斛饴梢 榀谌范 皲铷菀 斧挞溶 艟浓防 冗洞眩 呈鳌谗 镙皈柢 锎芥器 顿卩瘢 察阱噱 码鞴孙 叠鹂灿 蚜狁攒 踱移锟 暨绉腾 舳村牿 嫉俟铡 啡铱匿 娱民揄 渔匾吉 堆芽滟 鲸纩刘 不擀百 蛙谐殊 练迅蛊

_凉心丶_

div标签和a标签可以紧挨着,没有完全贴合是因为代码格式的原因吧

慕神4593838

*{ padding: 0; margin: 0 auto; font-family: "宋体";}.Slider,.Content,.Main{ width: 100%; height: 400px;}/*幻灯片内容*/.Content /*.Main*/{ position: relative;}/*幻灯片图片*/.Content .Main img{ width: 100%; height: 400px;}/*幻灯片主题*/.Content .Main .Caption{ position: absolute; top:22%; left: 25%;}.Content .Main .Caption h2{ font-size: 40px; line-height: 50px; text-align: right; margin-right: -45px; color: gray;}.Content .Main .Caption h3{ font-size: 75px; line-height: 75px; text-align: left; margin-left: -45px; color: rgb(000,000,000);}/*幻灯片控制按钮*/.Content .Control{ width: 100%; height: 13px; position: absolute; left: 0; bottom:-13px; background: red; text-align: center;}.Content .Control a{ display: inline-block; background: gray; width: 180px; height: 13px; position: relative;}.Content .Control img{ width: 180px; position: absolute; bottom: 13px; 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> </div> <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-block;设置浮动也可以,但是要清除浮动

后知后觉88

要么设置a浮动float:left,  要么设置a  display:block;

我爱吃牛排

代码复制上来帮你看

慕神4593838

*{ padding: 0; margin: 0 auto; font-family: "宋体";}

跳跃的鱼

首先清除padding,margin默认编剧看看
随时随地看视频慕课网APP

相关分类

CSS3
我要回答