请问我的代码规范吗?为什么图片的下外边距不用设置,就可以和文字产生距离,是因为行高的原因吗?

请问我的代码规范吗?为什么图片的下外边距不用设置,就可以和文字产生距离,是因为行高的原因吗?

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>慕课网</title>

<style type="text/css">

.content{

         width:810px;

         height:auto;

margin:0 auto;

font-style:"微软雅黑";

line-height:24px;

border:1px solid gray;

padding:10px;

}

.img01{

       float:left;

   margin-right:10px;

   

   }

.img02{

       float:right;

   margin-left:10px;

       

   }

</style>

 

</head>    

<body>

    <div class="content">

        <img src="http://img1.sycdn.imooc.com/climg//59c8742e0001bc9607120172.jpg" alt="" class="img01">

        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/>

        慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言,包括基础课程、实用案例、高级分享三大类型,适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点,为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>

        4月2日,国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解,在此次上线的版本中,慕课网新增了课程历史记录、相关课程推荐等四大功能,为用户营造更加丰富的移动端IT学习体验。<br/><br/>

        <img src="http://img1.sycdn.imooc.com/climg//59c874560001779307120172.jpg" alt="" class="img02">

        老师来自于各大IT公司重要技术岗位,拥有丰富的实战经验。语言平实、通俗易懂,更接地气,传授最有价值的经验之谈。课程内容注重实用性,不仅让学员通过学习能够做出产品,而且学习过程中掌握的方法技巧在实际工作中用得上,能够切实帮助学员提升工作技能。<br/><br/>

        慕课网的绝大多数课程都经过了专业的后期制作,为课程内容匹配了个性化的视觉效果,帮助学员更好地理解课程内容,增加学习的乐趣。

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
山河远阔ZZ 2019-01-07 16:14:13

当把行高,内边距,外边距都去掉之后,也没有改变图片下面的间隙,这个间隙是因为它旁边的文字独占了一行,所以撑起来了。

当把内容删掉了之后,间隙就没有了,参考下图:

http://img1.sycdn.imooc.com//climg/5c330a4d00013c0014840252.jpg

山河远阔ZZ 2019-01-07 15:15:09

同学你好,造成图片下边距的间隙大是因为它旁边的文字独占了一行,如下图:

http://img1.sycdn.imooc.com//climg/5c32fc4300013c5708510222.jpg

整体设置了一个padding:10px 图片又设置了margin-left:10px,所以它们的间隙是不一样的。

  • 提问者 阿扬在自律路上 #1
    所以这是因为padding:10和行高的10相加造成的不
    2019-01-07 15:32:13
山河远阔ZZ 2019-01-07 12:05:35

同学你好,代码写的简单明了,效果也出来了,但是代码中有一处错误,如下图:

http://img1.sycdn.imooc.com//climg/5c32cebc000158fb07760147.jpg

图片是自带下边距的,所以不设置,也可以跟文本产生间距,可以把图片从inline-block元素变成block元素查看一下,参考下图:

http://img1.sycdn.imooc.com//climg/5c32cff800013a8f14340384.jpg

希望解答了你的疑惑,祝学习愉快,望采纳!

  • 提问者 阿扬在自律路上 #1
    但是下方与文字的间隔比左右两侧与大框架的间隔大,所以我分别调整了两张图片的左右两侧的外边距。就是对于这个左右间隔与下方间隔的宽度不一致有些疑问。
    2019-01-07 14:26:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师