老师，为什么我的代码和效果图不一样啊？

来源：3-19 编程练习

ZPF_NEXT

2018-12-10 16:43:41

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border属性</title>
    <style type="text/css">
        .container{
          width:200px;
          height:200px;
          background-color:pink;
            /*补充样式*/
          
            
        }
        .content{
          width:100px;
          height:100px;
          background-color:orange;
           /*补充样式*/
          padding-top:50px;
          padding-left:100px;
          padding-right:30px;
           
        }
span{background-color:yellow;
     padding-top:30px;
     padding-left:30px;
     padding-right:30px;
}
    </style>
</head>
<body>
    <div class="container">
      <div class="content">
         <span>
           我是span元素
          </span>
</div>
    </div>
</body>
</html>

写回答

4回答

好帮手慕夭夭

2018-12-10

已采纳

你好同学 ,因为padding设置的不对 . padding是设置容器与它里面的内容之间的间距的 , 所以要加在容器上面 . 例如如下:

对于container来说 , content是它里面的内容 ,所以设置container与content的间距 ,要加在容器container上面 .

如下修改:

完善一下吧 , 祝学习愉快望采纳 .

hPF_NEXT

h <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>border属性</title> <style type="text/css"> .container{ width:200px; height:200px; background-color:pink; /*补充样式*/ padding-top:50px; padding-left:100px; padding-right:30px; } .content{ width:100px; height:100px; background-color:orange; /*补充样式*/ padding-top:30px; padding-left:30px; padding-right:30px; } span{background-color:yellow; } </style> </head> <body> <div class="container"> <div class="content"> <span> 我是span元素 </span> </div> </div> </body> </html>

h018-12-11

共2条回复

好帮手慕夭夭

2018-12-11

你好同学 , 根据你修改的进行测试 , 如下盒子宽度设置大一些即可 :

祝学习愉快 ,望采纳 .

ZPF_NEXT

提问者

2018-12-11

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border属性</title>
    <style type="text/css">
        .container{
          width:200px;
          height:200px;
          background-color:pink;
            /*补充样式*/
          padding-top:50px;
          padding-left:100px;
          padding-right:30px;  
        }
        .content{
          width:100px;
          height:100px;
          background-color:orange;
           /*补充样式*/
          padding-top:30px;
          padding-left:30px;
          padding-right:30px;
        }
       span{background-color:yellow;
     
        }
    </style>
</head>
<body>
    <div class="container">
      <div class="content">
         <span>
           我是span元素
          </span>
</div>
    </div>
</body>
</html>

qq_摩羯座丶的男人_0

2018-12-10

首先span不是块级元素不能加,padding.,其次你的padding都刚好加错了地方.那个div需要加padding就在哪个div加

0 学习 · 36712 问题

查看课程

相似问题

3-17编程练习怎么感觉和效果图不一样呢？

回答 2

我的li对齐方式无法跟作业要求一致，请问老师该怎么处理？

回答 2

4-3为什么不能实现效果？

回答 2

为什么p3长度更改不了

回答 3

为何代码跟老师一样还是有问题啊？

回答 6

打开慕课网App查看更多内容