使左右边距宽度相同 [英] Make the left and right margins the same width
本文介绍了使左右边距宽度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何让左边（大）边界像右边一样小？
我知道CSS重置，但仍然无法找出实际的工作方式。
< body>
< div id =quote> Foo< / div>
< p> Foo< / p>
< / body>
< style>
body {padding-left：10％; background-color：rgb（255,205,205）; }
#quote {margin-left：-10％;填充 - 左侧：10％; background-color：rgb（205,255,205）; }
$ b $ *我可以使用`calc`作为一个值，但我明白这不是
聪明的方式* /
/ * #quote {margin-left： calc（-10％ - 16px）; } * /
< / style>
问题：
我想要实现的行为：
解决方案
首先删除浏览器采用的默认边距和填充。
like：
* {
保证金：0;
padding：0;
}
然后，
改变像下面的CSS。
body {
background-color：rgb （255,205,205）;
填充：0 1％;
}
#quote {
background-color：rgb（205,255,205）;
padding-left：10％;
}
What is the way to make the left (large) margin as small as right? I know about CSS resets, but still cannot figure out the actual working way.
<body>
<div id="quote">Foo</div>
<p>Foo</p>
</body>
<style>
body { padding-left: 10%; background-color: rgb(255,205,205); }
#quote { margin-left: -10%; padding-left: 10%; background-color: rgb(205,255,205); }
/* I can use `calc` as a value, but I understand that it is not
the clever way */
/* #quote { margin-left: calc(-10% - 16px); } */
</style>
The problem:
The behaviour I would like to implement:
解决方案
First of all remove default margin and padding which browser taking.
like:
* {
margin: 0;
padding: 0;
}
Then,
Change css like following. There is not need of negative margin.
body {
background-color: rgb(255, 205, 205);
padding: 0 1%;
}
#quote {
background-color: rgb(205, 255, 205);
padding-left: 10%;
}
这篇关于使左右边距宽度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
