网页设计中margin怎么用【优秀2篇】
网页布局中margin也是必不可少的，那么在网页设计布局中，margin应该怎样使用呢？差异网为您精心收集了2篇《网页设计中margin怎么用》，如果能帮助到您，差异网将不胜荣幸。
网页设计中margin怎么用 篇一
margin属性是元素的边距距离。
包括margin-top,margin-right,margin-bottom,margin-left,margin四个，可以设置元素的具体四边的外边距。
center，left，right只是元素的对其方式。
只能左，中，右。
最简单来说，比如body，默认时它的四边距不为空，要使body紧靠页面边缘，就要加个:
网页设计中margin怎么用【3】
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？
什么时候该用 padding而不是margin?
你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……
写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。
介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。
[url=]网页设计培训[/url]中的Margin是什么
CSS 边距属性定义元素周围的空间。
通过使用单独的属性，可以对上、右、下、左的外边距进行设置。
也可以使用简写的外边距属性同时改变所有的外边距。
——W3School
边界，元素周围生成额外的空白区。
“空白区”通常是指其他元素不能出现且父元素背景可见的区域。
——CSS权威指南
我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），
我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
Margin的特性
margin始终是透明的。
margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。
即:margin-top、margin-right、margin-bottom、margin-left。
外边距的 margin-width 的值类型有:auto | length | percentage
也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;
(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。
并且规范还提供了省略的数值写法，基本如下:
1、如果margin只有一个值，表示上右下左的margin同为这个值。
例如:margin:10px;
就等于 margin:10px 10px 10px 10px;
2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。
例如:margin:10px 20px;
就等于 margin:10px 20px 10px 20px;
3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。
例如:margin:10px 20px 30px;
就等于 margin:10px 20px 30px 20px;
4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。
例如:margin:10px 20px 30px 40px;
在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;
日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;
费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;
来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。
垂直外边距合并问题
别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
你可以查看W3Shool CSS外边距合并了解这个基本知识。
实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。
例子可以查看下面代码（IE下表现“正常”，标准浏览器下查看出现“bug”）:
我其实只是想和我的父元素隔开点距离。
如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。
而其他标准浏览器则会表现出“有问题”的外观。
好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”（父元素，祖先元素）的麻烦。
只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top
就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，
而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，
而且在页面设计稿里如果不需要 border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。
为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢？答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。
用Margin还是用Padding
何时应当使用margin:
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白，需要相互抵消时。
如15px + 20px的margin，将得到20px的空白。
何时应当时用padding:
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白，希望等于两者之和时。
如15px + 20px的padding，将得到35px的'空白。
个人认为:margin是用来隔开元素与元素的间距；
padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
margin在块元素、内联元素中的区别
HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。
顾名思义，block元素就是以”块”表现的元素(block-like elements)，inline元素即是以”行”表现的元素(character level elements and text strings)。
二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。
inline元素则同其他inline元素共处一行。
block元素（块元素）大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS
（随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入）注意的是并非所有的block元素的默认display属性都是 block，
像table这种display:table的元素也是block元素。
inline元素（内联元素）大致有:#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | selec | TEXTAREA | LABEL | BUTTON
其中有类特殊的元素:如img|input|select|textarea|button|label等，他们被称为可置换元素(Replaced element)。
他们区别一般inline元素（相对而言，称non-replaced element）是:这些元素拥有内在尺寸(intrinsic dimensions)，他们可以设置width/height属性。
他们的性质同设置了display:inline-block的元素一致。
或许有朋友对非置换元素(non-replaced element)有点疑惑，稍微帮助大家理解一下。
非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素(replaced element)，也就是说我们搞懂了置换元素的含义，就懂了非置换元素。
置换元素，W3C中给出了定义:
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
从定义中我们可以理解到，置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。
网页设计中margin怎么用 篇二
首先，我们先设计一个div，并且给这个div添加一个id，id名随意取。
02
然后设置一下宽高，并且添加一个红色的背景属性值。
03
默认情况下，这个div是靠近浏览器的顶部和左边的。
04
接着我们给这个div设置一下margin值，从左到右表示的是上边，右边，下边，左边的margin值。
05
设置好之后，可以看到左边和上边都隔开了一定的距离，这就是margin值的用处，而下边和右边因为没有其他div或者其他颜色，所以效果被忽略了。
06
当然，margin值也可以分开写，比如我只设置div的上边的margin值，就可以使用margin-top，而右边则可以使用margin-right，左边则是margin-left，下边则是margin-bottom。
07
如图，设置margin-top之后，只有上边拉开了距离，而左边并没有拉开距离。
08
接着我们再在网页中添加一个div，并设置id为“you”。
09
接着设置“you”这个div的宽高和背景。
10
如图所示，新添加一个div之后，如果没有设置margin-bottom的值，两个div就会连在一起。
11
然后我们给上面的div，也就是“my”，设置margin-bottom。
12
设置好之后，两个div之间就会拉开距离，这样就可以定位好div的位置。
13
而如果我们给“my”设置好margin-bottom之后，又给“you”设置margin-top，又会有什么结果呢？
14
结果就是这样：有两个相邻的div，如果一个div设置了margin-top，另一个设置了margin-bottom，则以它们之间值最大的为准。
比如margin-top是50像素，margin-bottom是30像素，则间隔就是50像素，而不是两个相加哦。
了解这个之后，在网页布局中，我们只需要对其中一个设置就可以了。
以上内容就是差异网为您提供的2篇《网页设计中margin怎么用》，希望可以对您的写作有一定的参考作用，更多精彩的范文样本、模板格式尽在差异网。