margin的所有值

margin属性总结，你想知道的这里都有

一.前言在学习CSS时,遇到的很多问题都是和margin有关,这个小怪兽总是出其不意的让我的界面排版变的混乱,还让人摸不着头脑,原因还是在于我对他的一些属性没有进行一个深入的了解,导致我在设计之初就忽略了一些潜在的bug.所以本文就margin属性以及常见的问题做一个总结归纳. 二.什么是margin CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.--W3School 边界,元素周围生成额外的空白区

浅谈Margin和Padding值设置成百分数的布局

转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流体布局或者是响应式布局中,经常将Margin和Padding设置成百分数,那么到底这个百分数是多少,他是如何计算的呢? Margin 假设我们有这样的一段HTML

常用元素默认margin和padding值问题探讨

关于默认元素在不同浏览器中的margin值是多少的问题,今天做了一个探讨复制代码代码如下: // body的margin值 firefox 20.0 ----------------------- body的margin为: margin:8px 8px 8px 8px; Internet Explorer 6.0 ----------- body的margin为: margin:15px 10px 15px 10px; Internet Explorer 7.0 ----------- b

当padding/margin的取值形式为百分比时。。。。。

一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: 利用这个规范,我们可以用来解决移动端的高度自适应占位问题,在移动端,高度一般都是用内部撑开,例如,一个div包着一个图片.如果是用图片撑开div的

CSS margin属性取值

margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近但是,设置margin后,四个方向的表现形式不同自身发生移动:top.left margin-top <div id="negtive_top"> <div>margin-top: -50px;自身向上移动50px</div> </div> CSS #negtive_top{ background-color: green; borde

关于IE处理margin和padding值超出父元素高度的问题

两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让父padding+子margin-top的值大于父div的高度.这时,chrome,firefox,opera中效果都会把子div"挤出".唯独IE,居然敢擅自增加父div的高度(父div高度是设置好的),用来容纳子div.以下是代码和效果图: <html> <head&

margin三个值

http://www.cnblogs.com/wangkongming/p/3204734.html margin标记可以带一个.二个.三个.四个参数,各有不同的含义. margin: 20px;(上.下.左.右各20px.) margin: 20px 40px;(上.下20px:左.右40px.) margin: 20px 40px 60px;(上20px:左.右40px:下60px.) margin: 20px 40px 60px 80px;(上20px:右40px:下60px:左80px.

margin相关属性值

1.图片与文字对齐问题图片与文字默认是居底对齐.一般img标签打头的小图标与文字对齐的话,通过 img{margin:0 3px -3px 0;} 这个的东西,能实现效果和兼容性俱佳的对齐效果: demo: <div> <img style="margin:0 3px -3px 0px;"width='20' height='20' src="img/sp-loading.gif" alt=""> <span>

css reset 以及哪些元素有默认margin padding值

很多网站在css reset 的时候有如下做法: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fieldset, img { margin: 0; padding: 0; border: 0; list-style: none; } 也许你有些许怀疑,上面列出的标签都有默认的 margin 和 padding 值么,是不是不管三七二十一, 就统统直接 margin:0 , padding:0 呢?

谷歌、火狐浏览器缩放为80% 时，margin值才正确

声明:小白的笔记,欢迎大神指点.联系QQ:1522025433. 在网页布局中,通过谷歌浏览器或火狐浏览器预览时,发现我们定义的盒模型width,height,margin,padding 值都是不准确的,具体我们来看下面的示例: css代码: * { margin:; padding:; } .box1 { width: 200px; height: 200px; background-color: red; } .box2 { margin-top: 200px; width: 200p

总结那些有默认margin,padding值的html标签

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

html标签默认属性值之margin;padding值

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

关于margin和padding取值为百分比和负值的总结

以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负值: 比如 margin-top / right / bottom / left : -100px; 为负值的情况讨论如下: ①: ②:若元素存在width:则正常: 比如 div { margin: 10px 2% -40px 0 } 表示该盒子顶边距为10px,右边距是父元素宽度的2

CSS 百分比 margin & padding

前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度 . 引用标准(2.1)原来的表达: The percentage is calculated with respect to th

理解css margin

前提是对display:block元素 1 margin对没有width属性的元素,能影响其宽度,对于有width的则不起作用: 高度方面不受影响此特性可用来排版 2 margin 与百分比普通的没有带absolute fixed 的元素 ,无论横竖百分比,都相对横向数值但是带有absolute,fixed 的,则相对第一个有相对定位的百分数值 3 margin 重叠问题 margin-top 重叠的条件元素条件:1)父元素与第一个子元素或者最后一个元素 2)相邻的兄弟元素 3) 空的

CSS中margin与padding的区别

CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象.补白(padding):补白位于元素框的边界与内容区之间.很自然,用于影响这个

深入理解css中的margin属性

深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况第一部分:margin--基础知识要介绍margin的基础知识,我们不可回

<span>和<a>的margin上下和padding上下不起作用的原因和解决

使用到了<span>和<a>标签,发现在样式里面直接写margin-top.margin-bottom和padding-top.padding-bottom都不起作用,页面样式的东西懂得不多,搜索一番,发现是因为<span>和<a>都不是块级元素,所以这几个属性都无效. 解决办法:在样式中加入display:block;即可解决问题. span的样式中,为保证文字水平和垂直居中,需要添加如下的属性: text-align:center;line-heigh

由浅入深漫谈margin属性1

margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情况下:margin-top/margin-left是有效的,margin-right/margin-bottom是无效的:当右浮动时,margin-right/margin-top是有效的.) 一.margin的基本特性 margin 属性包括 margin-top, margin-right, m

不要告诉我你懂margin

分类: Html/CSS | 转载请注明: 出自海玉的博客本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了

margin系列之keyword auto

本系列摘自 px; margin: auto; /* 或者 margin: 0 auto; */ } HTML: <div id="demo"> <p>恩,我就是那个需要水平居中的家伙.</p> </div> 为了更明显点,我们来看个例子:margin实现块元素水平居中.Cool,这么简单就实现了水平居中. 不过你可能也发现了不论是 margin: auto; 还是 margin: 0 auto; 效果都是一样的,都是让 #demo 水

margin的所有值

热门专题