这里有两个div，外部的div宽度设置为固定值，内部的div宽度设置为auto，当内部div的margin-left 和margin-right 设置为负边距时，会使内部div的宽度增加，如下所示
<div style="margin:auto;width:400px;height:400px;background-color:#E0E0EE;">
<div style="width:auto;background-color:blue;height:300px;margin-left:-50px;"></div>
</div>
截图：
至于其中的原理还不清楚，主要是因为宽度是auto的原因，当将margin-left设置为-50px时，内部div应该向左边移动，右边空出的位置应该被其他的元素填充，但由于width为auto，所以就由自己来填充；
这只是自己的理解
- 大小: 1.9 KB
分享到：
相关推荐
在这篇文章中，我们主要讨论了自适应布局的实现方式，特别是使用浮动和margin负边距的技巧，以及相关的圣杯布局和双飞翼布局。 首先需要了解的是浮动布局。浮动布局是CSS布局的一种方式，通过使用float属性，可以让...
负边距不会破坏正常文档流，当应用于未浮动的元素时，它可以用来微调元素的位置，而不会影响后续元素的布局。这使得负边距在需要精确控制元素位置时非常有用。例如，通过设置`margin-top:-10px`可以将元素向上移动10...
负边距还可以影响元素的宽度。如果一个元素没有设定宽度（或宽度为`auto`），那么负的`margin-left`和`margin-right`实际上会增加元素的显示宽度。这是因为文档流会根据元素的边距来确定其边界，而负边距会使边界向...
- **百分比值**：`padding`和`margin`可以使用百分比值，相对于父元素的宽度（对于`margin`，在大多数情况下是这样），这在响应式设计中非常有用。 - **自动值**：`margin`和`padding`可以设置为`auto`，这通常用于...
CSS中的margin属性是控制元素外边距的重要工具，它能够影响元素与其它元素间的距离，从而对页面布局产生影响。本文将详细梳理margin属性相关的核心知识点。 首先，margin属性是CSS中非常重要的一个属性，它允许...
1. **负边距**：`#id1` 和 `#id2` 使用负边距 `margin-left` 来实现位置的偏移，同时配合 `position: relative` 确保不会影响其他元素。 2. **包裹层**：`<div class="warp">` 用于包含中间栏 `#id3`，保证其宽度...
此外，`margin`还可以作为一个简写属性，一次性设置所有边距，例如`margin: 40px 50px 60px 80px;`，顺序依次为上、右、下、左。若只需设置相同边距，可以写作`margin: 40px;`。 接下来是补白属性`padding`，它定义...
`margin`可以单独设置上、右、下、左四个方向的边距，也可以通过`margin: value`一次性设置所有方向的边距。例如，`margin: 10px`会给元素的所有边缘添加10像素的边距。 2. **补白属性（Padding）**： `padding`...
在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...
在这个主题中，我们将专注于 CSS3 中的边距属性，包括内边距（padding）和外边距（margin），它们对于创建整洁、有层次感的网页布局至关重要。 首先，内边距（padding）是元素内容与边框之间的空间，用于在内容和...
对于编辑框的左右边距，可以使用`margin-left`和`margin-right`属性。例如，如果你想将一个编辑框的左右边距设置为10像素，可以这样写： ```css input[type="text"] { margin-left: 10px; margin-right: 10px; } ...
这是因为将`div`设置为内联元素后，它不再占据整行宽度，而是只占据其实际宽度，这可能与预期的布局不一致。 ### 火狐等现代浏览器中的自适应高度问题 除了IE6的双倍边距问题之外，另一个常见的兼容性问题是关于...
通过本文的详细介绍，相信读者已经对CSS中的`padding`与`margin`有了更深刻的理解。这两个属性在网页布局中扮演着至关重要的角色，合理利用它们可以让网页设计更加美观和高效。在未来的学习和实践中，希望各位能够...
* padding 属性会影响元素的宽度和高度，而 margin 属性不会。 在上面的代码中，我们使用了 `#container` 和 `#text` 两个元素来演示 padding 和 margin 属性的使用。`#container` 元素的 padding 设置为 `10px`，...
首先，要理解CSS中的“宽度”属性（width），它是用来设定元素内容区域的宽度，不包括内边距（padding）、边框（border）和外边距（margin）。设置div的宽度可以帮助我们精确地调整元素在页面上的展示大小，从而实现...
在本讲座中，我们聚焦于使用DIV+CSS创建网页时涉及到的边距属性，包括内边距（padding）和外边距（margin），以及CSS3的box-shadow属性和box-sizing属性。 内边距（padding）是元素内容区域与边框之间的空间。CSS...