blocks|key|1576319|text|使用width:+auto和margin-left:+20px在新的div中添加一个div|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1576320|从newdiv中删除填充。|1576321|The+W3+Box+model+page+has+good+info.|1576322|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/box.html^0|2|B|E|H|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>Put a div in your newdiv with <code>width: auto</code> and <code>margin-left: 20px</code></p>

<p>Remove the padding from newdiv.</p>

<p><a href="http://www.w3.org/TR/CSS2/box.html" rel="noreferrer">The W3 Box model page has good info.</a></p>


blocks|key|1576383|text|只要改变你的div宽度为160px，如果你有一个20px的填充，它增加了40px到你的div的宽度上，所以你需要从宽度中减去40px，以保持你的div看起来正常，不会因为额外的宽度而扭曲，你的文本就会变得一团糟。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1576384|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>just change your div width to 160px
if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.</p>


blocks|key|1361266|text|如果您想在不更改div大小的情况下缩进div中的文本，请使用CSS+text-indent而不是padding-left。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1361267|​|1361268|.indent+{
++text-indent:+1em;
}
.border+{
++border-style:+solid;
}|code-block|syntax|javascript|1361269|<div+class="border">
++Non+indented
</div>

<br>

<div+class="border+indent">
++Indented
</div>|1361270|1361271|entityMap^0|Y|B|1C|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>If you would like to indent text within a div without changing the size of the div use the CSS <code>text-indent</code> instead of <code>padding-left</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="border"&gt;
  Non indented
&lt;/div&gt;

&lt;br&gt;

&lt;div class="border indent"&gt;
  Indented
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1361290|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361291|box-sizing:+border-box;|code-block|syntax|javascript|1361292|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this</p>

<pre><code>box-sizing: border-box;
</code></pre>


blocks|key|1361305|text|只需添加box-sizing:+border-box;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1361306|entityMap^0|4|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>simply add  <code>box-sizing: border-box;</code></p>


blocks|key|1576499|text|这在所有情况下都有效，在预定义的宽度中包含额外的填充|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1576500|框大小:边框大小；|1576501|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>This would work in all cases, with this the extra padding included in predefined width</p>
<p>box-sizing: border-box;</p>


<p>I am creating a site with <code>DIV</code>s. Everything's working out except when I create a DIV. I create them like this (example):</p>

<pre><code>newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}
</code></pre>

<p>When I add the <code>padding-left</code> property, the width of the <code>DIV</code> changes to 220px, and I want it to remain at 200px.</p>

<p>Let's say I create another <code>DIV</code> named <code>anotherdiv</code> exactly the same as <code>newdiv</code>, and put it inside of <code>newdiv</code> but <code>newdiv</code> has no padding and <code>anotherdiv</code> has <code>padding-left: 20px</code>. I get the same thing, <code>newdiv</code>'s width will be 220px.</p>

<p>How can I fix this problem?</p>


How do I prevent the padding property from changing width or height in CSS?

我正在用DIV创建一个站点。除了我创建DIV的时候，一切都正常。我像这样创建它们(示例)：newdiv {    width: 200px;    height: 60px;    padding-left: 20px;    text-align: left;}当我添加padding-left属性时，DIV的宽度更改...

问如何防止填充属性更改CSS中的宽度或高度？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止填充属性更改CSS中的宽度或高度？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止填充属性更改CSS中的宽度或高度？
EN