为什么我的图片和边框之间有距离

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

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

3回答
好帮手乔木 2019-08-29 10:04:19

同学你好:

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

同学这里有个<br>换行,可以将内容写入到<p></p>标签中。

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

如果我解决了同学的问题,请采纳!学习愉快^_^。

好帮手乔木 2019-08-27 10:09:14

同学你好:

同学定义了margin(外边距的属性),是class=“div2”的上下左右的外边距都为10px。因此才会和边框有距离。

同学可以定义margin-left;margin-top;margin-right;margin-bottom定义每一个边的外边距即可。

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

如果我解决了同学的问题,请采纳!学习愉快^_^。

  • 提问者 songgedodo #1
    谢谢,不过我问的是图片右边和边框之间的距离,不是div2与div2之间。图片的右边和边框中间有一点空白,左边和上边都没有
    2019-08-27 20:18:07
提问者 songgedodo 2019-08-26 22:01:57

这是代码

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style type="text/css">
            .div1{
                border:1px dashed gray;
                height:430px;
                width:870px;
            }
            .div2{
                border:1px solid black;
                margin:10px;
                padding:0px;
                
                float:left;
            }
            img{
                vertical-align:center;
            }
        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div class="div1">
            <div class="div2">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <br>欢迎来到慕课网学习新知识!
            </div>
         <div class="div2">
             <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <br>欢迎来到慕课网学习新知识!
         </div>
         <div class="div2">
             <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <br>欢迎来到慕课网学习新知识!
         </div>
         <div class="div2">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <br>欢迎来到慕课网学习新知识!
            </div>
         <div class="div2">
             <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <br>欢迎来到慕课网学习新知识!
         </div>
         <div class="div2">
             <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <br>欢迎来到慕课网学习新知识!
         </div>
        </div>
</body>
</html>


问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
3.从网页搭建入门Python Web
  • 参与学习           人
  • 提交作业       218    份
  • 解答问题       3562    个

本阶段带你用Python开发一个网站,学习主流框架Django+Flask是Python Web开发的第一步,在基础知识上实现积分商城的项目开发,体验真实的项目开发流程,提高解决编程问题和效率的能力。

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

在线咨询

领取优惠

免费试听

领取大纲

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