这一题为什么外面的div只给了上面和左面的内边距,而没有给右面和下面的内边距

这一题为什么外面的div只给了上面和左面的内边距,而没有给右面和下面的内边距

是因为不用给出了,直接输入上面和左面的内边距就可以直接显示出来吗?还是因为宽度和高度的设置限制?(像里面的div也只是给出了上和左右的内边距,没有给出下面的)

我这样写对不对?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>border属性</title>

    <style type="text/css">

        .container{

          width:200px;

          height:200px;

          background-color:pink;

          padding-left:100px;

  padding-top:50px;

  

        }

        .content{

          width:100px;

          height:100px;

          background-color:orange;

          padding:30px;

        }

        span{background-color:yellow;}

    </style>

</head>

<body>

    <div class="container">

      <div class="content">

         <span>

           我是span元素

          </span>

</div>

    </div>

</body>

</html>


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

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

2回答
好帮手慕夭夭 2018-12-27 17:26:35

你好同学 ,并不是这样的 , container宽度是200px , padding-left是100px . 所以盒子总宽度为300px , 如下:

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

所以如果你再设置右填充的话 ,总体的宽度就又变大了 . 这里同学重新理解一下 . 因为盒子实际宽度包括padding , border以及width的 . 

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

好帮手慕夭夭 2018-12-27 14:32:37

你好同学 , 根据效果图 , 最外层的盒子设置了上填充与左填充就已经达到效果了 , 如果你设置了下填充和右填充 , 盒子又会被撑大一些的 . 如果你想设置下填充或者右填充 , 就要把盒子的宽高修改一下 . 例如设置下填充 , 自己可以去试一试

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

建议如下修改一下宽度 ,让文字不会被挤下去

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

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

  • 提问者 阿扬在自律路上 #1
    灰灰老师,container的宽度是200px,content的宽度是100px,左内边距是100px。这样计算的话右边距不就没有空隙了?
    2018-12-27 16:17:57
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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