Question

在我的作业中，我使用了div标签。在一个div标签中，我定义了以下内容。当我改变填充时，它也改变了宽度。但是我想只改变填充而不改变我的div class =“top-center”的含义。这是css类

.top-center {
    border:1px solid black;
    position:absolute;
    height:31%;
    width:100%;
    border-bottom: 1px;
    border-left:1px;
    border-right: 1px;*/
    padding-top: 2px;
    padding-right: -40px;
    padding-bottom: 2px;
    padding-left:20px;
    text-align:center;
    font-size: 25px;
    color:#ffe0b3 ;
}

这是相应的div标签

<div class="top-center">
    <p class="font-new" id="eff">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text .</p>
</div>

Answer 1

这是标准的盒子模型行为。要保持边框和填充不影响元素宽度，请在元素上使用box-sizing: border-box。这是一个很好的解释 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

border-box - 宽度和高度属性包括内容，填充和边框，但不包括边距。这是文档处于Quirks模式时Internet Explorer使用的框模型。请注意，填充和边框将位于框内部，例如.box {width：350px; border：10px solid black;}导致在浏览器中呈现的宽度为350px的框。内容框不能为负数，并且会被置于0，从而无法使用边框来使元素消失。

默认的箱子模型box-sizing值为content-box。以下解释了为什么您的盒子的行为方式与当前一样。

content-box - 这是CSS标准指定的初始值和默认值。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。注意：填充，边框和保证金将在框外，例如IF .box {width：350px;}然后你应用{border：10px solid black;} RESULT {在浏览器中呈现}一个宽度为370px的框。

Answer 2

使用box-sizing: border-box作为div。填充增加了元素宽度。并且也不要使用负值来填充，因为它是无效的。

为什么在更改html中的padding属性时，width属性是changin

2 个答案: