麻烦老师解答谢谢

width: 200px;

background-color: red;

padding: 20px;

margin: 40px;

}

<a href="">wenzi</a>

这里的padding 和margin 都表示上下左右的值，而页面检查也是有上下左右的各个数值，那是代表都能生效吗？

还有auto这个属性值是代表什么自适应吗？

例如padding：auto 10px; 这个表示上下根据左右的变换而变换吗?

夜的解忧铺 2021-06-22

源自：盒模型 2-3 padding属性详解

收起

2回答

好帮手慕久久 2021-06-23 11:04:26

同学你好，这只是谷歌浏览器的显示问题，如下：

块级元素要独占一行显示，即块级元素要占满整行，因此在谷歌浏览器上，为了表示这一特性，即使块级元素不设置margin样式，审核元素时，元素右侧也会有肉粉色的框，例如：

而margin也是用肉粉色的框表示，所以a右侧的粉框就很大（右侧粉框并不是表示margin很大，margin还是设置的值）：

这只是谷歌的问题，如果换成火狐，效果如下：

祝学习愉快！

收起回答

提问者夜的解忧铺 #1

对之前的问题再次尝试了下，麻烦老师解答下谢谢
1
<style>
        div{
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        a{
           border: 1px solid red;
            padding: 20px;
            /* display: block; */
        }
    </style>
</head>
<body>
        <div>a上面的内容</div>
        <a href="">我是a</a>
        <div>a下面的内容</div>
</body>
效果如下：
padding 是在行内元素四个方向都不生效吗？但看起来左右是生效的，加了边框之后，上下看起来也是有效果，只是上下没实际作用，不加边框似乎起不到作用

转为块级元素才生效

2
margin

    <style>

        div{
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        a{
           border: 1px solid red;
            margin: 20px;
            /* display: block; */
        }
    </style>
</head>
<body>
        <div>a上面的内容</div>
        <a href="">我是a</a>
        <div>a下面的内容</div>
</body>
效果如下
margin是左右两个方向在行内元素可以生效，上下不生效

2021-06-24 01:46:11
好帮手慕久久回复提问者夜的解忧铺 #2

同学你好，解答如下：
1、行内元素设置四个方向的padding，盒模型中会将四个padding都展示出来，但是真正起作用的（“将其他元素推开一定的距离”）只有左右padding。上下padding，可以把元素撑起来，但是实际上并不会起到“推开”的作用：
2、理解的正确。给行内元素设置margin，左右margin有效，但是上下margin无效。
因此，不要给行内元素设置上下margin，因为会没有效果。而上下padding，可以将元素撑开，让视觉效果好看，比如：
当想要实现上图中的效果时，可以考虑设置四个方向的padding。但是当想要实现“推开元素”效果时，则不能设置上下padding，因为上下padding没有“推开”效果。
祝学习愉快！

2021-06-24 10:47:34

好帮手慕久久 2021-06-22 10:26:56

同学你好，解答如下：

1、如下盒模型含义是给a设置了四个paddding和4个margin：

由于语法上没有错误，所以盒模型中会将a的margin、padding都显示出来。

但是盒模型中能显示出来，不代表在页面效果上，margin和padding就是生效了的，比如a的上下padding就不会生效：

再比如a的上下margin也没有效果：

所以盒模型只是告诉了我们元素设置了哪些内容，而到底有没有效果，还有结合页面效果来分析。

2、auto常翻译成“自适应”，它的意思让浏览器自己计算。

原则上讲，padding：auto 10px;表示上下边距让浏览器自己计算，auto并不会跟随左右的值变化，而是浏览器会根据元素上下方向的空间信息，自己计算出padding值。但是，实际效果上，给元素设置padding是auto后，浏览器并不会自动计算，而是会将paddding都设置成0，所以padding几乎不会设置成auto，了解即可。

祝学习愉快！

收起回答

提问者夜的解忧铺 #1

a{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 40px;
            display: block;
            text-align: center;
        }
将a转换成块级元素后，padding和margin就能显示效果，但是margin为什么铺满了整个屏幕，外边距不应该也是按照给的数值来变化吗？

2021-06-22 22:29:01