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

songgedodo 2019-08-26

源自：CSS浮动 4-11 编程练习

收起

3回答

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

同学你好：

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

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

收起回答

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

同学你好：

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

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

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

收起回答

提问者 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>