为什么第一行上面还是有空白部分

为什么第一行上面还是有空白部分

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>慕课网</title>

    <style>

        .content{

            width:810px;

            height:auto;

            font-family:微软雅黑;

            line-height:24px;

            text-align:justify;

            border:1px solid gray;

            padding:10px;

        }

       

        .img{

            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>


正在回答

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

4回答

你好,右上角空白是因为img01

样式没有生效,修改如下:

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

效果如下:

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

抱歉老师开始理解的空白位置有误,如果解决您的问题请采纳,祝学习愉快!

guly 2020-04-02 15:12:39

你好,这是未设置之前空白位置如图:

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

2、设置padding为0px效果如下:图片与边框处没有空白。

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

如果指的是content与页面的空白建议设置 margin-top:-10px效果如下:

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

如果解决您的问题请采纳,祝学习愉快!

提问者 AOSOUL 2020-04-02 13:42:07

你上面设置padding为0px,可是还有空白部分啊

guly 2020-04-01 11:15:32

你好,删除空白部分设置padding的值为0px即可,效果如下:


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

如果解决您的问题请采纳,祝学习愉快!

  • 提问者 AOSOUL #1
    你会有看到你右上角还是有空白吗
    2020-04-02 15:17:56
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4930    个

想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。

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

在线咨询

领取优惠

免费试听

领取大纲

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