请问为啥我看着左右感觉不一样宽?

请问为啥我看着左右感觉不一样宽?

<!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;

            

        }

        .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>



同意左右设置padding:30px,可是看着左右的宽度不一样,另外如何让这些字一行显示http://img1.sycdn.imooc.com//climg/5c63d7c00001a9e813660768.jpg

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

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

2回答
好帮手慕星星 2019-02-17 10:50:20

你好,这个和浏览器解析也有关系,使用360浏览器进行测试是没有问题的:

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

或者是添加一个居中显示:

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

自己可以测试下。

山河远阔ZZ 2019-02-13 17:35:28

同学你好

1、里面的子元素同时设置padding:30的效果是实现了的,padding是内边距,是撑大自身的内容,所以看着左右的宽度不一样,如下:

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

2、可以给content的宽度设置大一点,这样文字就能在一行显示了,如下:

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

试一试哦,如果帮助到了你,欢迎采纳。

祝学习愉快!

  • 提问者 hkyzd888 #1
    那如何设置能让黄色部分显示的在中间,也就是左右两边的橘色部分宽度一样
    2019-02-16 17:21:25
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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