CSS 填充 - 显然我错过了一些东西

发布于 2024-07-16 02:02:25 字数 647 浏览 4 评论 0原文

假设我有一些像这样的标记：

<html>
<head>
<style type="text/css">
    #container
    {
        margin: 0 auto;
        width: 900px;
        background: green;
    }
</style>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

想象“容器”充满了数百个 a，用于测试填充目的。

现在，我想做的是在“容器”的边缘及其左侧和右侧的内容之间创建一个空白区域。所以我补充说：

padding-left: 50px;
padding-right: 50px;

现在根据我（认为）我的理解，这意味着如果之前每行适合 100 个 a，那么现在只能适合 80 个左右。换句话说，“容器”将保持相同的宽度，但向下增长。

然而，我看到的是“容器”的大小是水平而不是垂直增加的。

如何让“容器”垂直向下生长并水平保持相同宽度？

原文

Lets say I have some markup like this:

<html>
<head>
<style type="text/css">
    #container
    {
        margin: 0 auto;
        width: 900px;
        background: green;
    }
</style>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

Imagine "container" is filled with hundreds of a's for testing purposes of padding.

Now, what I want to do is to make an area of whitespace between the edges of "container" and its content on the left and right hand sides. So I add:

padding-left: 50px;
padding-right: 50px;

Now from what I (thought) I understood, this would mean that if 100 a's fitted per line before, only 80 or so would fit now. In other words, "container" would remain the same width but grow downwards.

However, what I am seeing is that the size of "container" is increasing horizontally and not vertically.

How can I get "container" to grow down vertically and stay the same width horizontally?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风来 2024-07-23 02:02:25

您需要将宽度更改为 800px，然后添加内边距。填充是宽度的累加。

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

盒子模型由Can Berk Güder

You need to change the width to 800px and then add your padding. Padding is additive to the width.

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

Box model courtesy of Can Berk Güder

回复收藏 0 原文

白鸥掠海 2024-07-23 02:02:25

garry 所说的，如果您使用 Chrome 或 Firefox 的 Firebug 插件，您可以右键单击并“检查元素”并查看元素大小的直观表示，这在这些情况下确实很有帮助。

回复收藏 0 原文

蘑菇王子 2024-07-23 02:02:25

向元素添加内边距或边距的影响完全取决于您查看页面的浏览器。正如 Garry 所说，内边距和边距应该是可加的，但 IE6 的情况并非如此，因此您需要围绕浏览器进行一些研究差异以及如何将它们纳入您的风格规则中。

从您的行为来看，您只想将填充应用于整个页面。您可以通过在 CSS 中直接引用 body 来做到这一点。所以你会-

body
{
    padding:0 50 0 50;
}

The affects of adding padding or margin to an element depend entirely on the browser you're viewing the page in. Padding and margin SHOULD be additive as Garry says but that's not the case with IE6 so you'll need to do some research around browser differences and how you can accommodate them in your style rules.

From what it looks like your doing you just want a padding to be applied to the whole page. You could do that by directly referencing body in your CSS. so you'll have -

body
{
    padding:0 50 0 50;
}

回复收藏 0 原文

只为守护你 2024-07-23 02:02:25

您还可以为 div 内的任何内容添加边距：

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>

You could also add a margin to anything inside the div:

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>

回复收藏 0 原文

~没有更多了~