这篇文章主要介绍“css负外边距怎么实现”，在日常操作中，相信很多人在css负外边距怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css负外边距怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联专业为企业提供西山网站建设、西山做网站、西山网站设计、西山网站制作等企业网站建设、网页设计与制作、西山企业网站模板建站服务，十年西山做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
负边距介绍
负边距的使用如下：
#content{margin-left:-100px;}
负边距通常在小范围使用。但是接下来你会看到，它能做的事情很多。下面是一些你应该知道的关于负边距的事情：
他们是完全有效的CSS
这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。
负边距不是在hack
这是尤其正确的。正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack
它符合正常的文档流
当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。所以付过你使用负边距把元素向上微调的话，所有后面的元素也会向上微调。
它是相当好的兼容性
负边距基本上被所有现代的浏览器支持（IE6的大部分情况也是）
当使用了float之后，会有不同的表现
负边距不是你平常使用的属性，所以使用的时候要格外小心。
Dreamweaver不理解它
负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？与其共事呢？
负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。
在static元素中使用负边距：
1.gif
一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。
当一个static元素在top/left使用负边距时，它把元素向这个特定的方向拉，比如
/*Movestheelement10pxupwards*/
#mydiv1{margin-top:-10px;}
但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。
/*
所有在#mydiv1后面的元素都会向上
移动10px，而#mydiv1一点都不会移动
*/#mydiv1{margin-bottom:-10px;}
如果宽度没有设置，左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding
在浮动中使用负边距
加入下面就是我们的html代码：
First
