padding与margin的差别

之前一直没有搞懂android:padding和android:layout_margin的差别,事实上概念非常easy,padding是站在父view的角度描写叙述问题,它规定它里面的内容必须与这个父view边界的距离.margin则是站在自己的角度描写叙述问题,规定自己和其它(上下左右)的view之间的距离,假设同一级仅仅有一个view,那么它的效果基本上就和padding一样了.比如我的XML layout代码例如以下: <?xml version="1.0" encodi…

当padding，margin，top为百分比值，具体数值如何计算

padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物,取决于你的排版方式是横向还是纵向) top,bottom值是以父元素的高度为基数,left,right 以父元素的宽度为基数. 补充:padding不可以为负值,margin,top可以为负值.…

用padding与margin做多个元素的等间距分布

这样做的好处是不管有多少个元素等间距分布,都可以直接写在li中,而且由于是给a设定的样式,所以在字数不一致的情况下,样式仍然是统一的. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/all.css"…

关于padding与margin的区别

代码一:全为padding. <!doctype html><html><head> <meta charset="UTF-8"> <title>margin||padding</title> <style type="text/css">#div1{ width: 800px; background-color: red; padding: 20…

HTML中行内元素的竖直方向的padding和margin是否真的无效

参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的? 接下来就这个问题将具体分析: 1.行内元素拥有盒子模型么答案是是的.没错,行内元素跟块级元素一样,同样拥有盒子模型. 2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效答案同样是是的.盒子…

CSS 盒子模型（Box model）中的 padding 与 margin

本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局的关键. 如果有一点HTML基础的话,就应该了解一些基本元素 (Element),如 p,h1~h6,br,div,li,ul,img 等. 如果将这些元素细分,又可以分别归为顶级 (top-level) 元素,块级 (block-level) 元素和内联 (inline) 元素. Block-le…

css padding和margin的百分比

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

CSS中padding和margin以及用法

CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyofnet.com/news/35.html…

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是paddin…

border，padding，margin盒模型理解

安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border,padding,margin盒模型理解</title> <style&…

【转】图解CSS padding、margin、border属性

http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,backgr…

Android中的padding和margin的区别

在Android的布局中,常常有人将padding和margin搞混,他们其实不一样的,padding是该控件的内部距离. magin是该控件与其他控件之间的距离.例如 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="matc…

python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

一.HTML中的行级标签和块级标签块级标签常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body100%宽度行级标签常见的行级标签:a,span,strong,u,em 1.能和其他元素待在同一行2.不能设置宽高3.宽高是内容的宽高行内块标签常见的行内块标签:img,input,textarea1.能和其他元素待在一行2.能设置宽高 span默认是不能设置宽高的,但是设置了displ…

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

能用padding，margin解决的不要使用伪元素，能用背景解决的也不要用伪元素

能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素…

内联元素的padding和margin

首先区分一下3类元素: 1)块级元素:div.p等这一类具有宽高属性,且单独占一行的元素: 2)占位元素:img.input这一类具有宽高属性.紧随上一个元素不单独占一行的元素: 3)内联元素:span.strong这一类不具有宽高属性,且紧随上一个元素不单独占一行的元素. 本文主要讨论内联元素的padding.margin属性的存在与否和表现形式. 直接看代码: <div id="wrap"> <span>啊啊啊啊啊啊</span> <spa…

css中padding与margin

CSS padding margin border属性详解图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin…

10-[CSS]-盒模型：border，padding，margin

1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示: <!-- 盒模型: 在网页中基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型重要的属性: width,height,padding,border, margin width: 指的是内容的宽度,而不是整个盒子真实的…

CSS中padding、margin、bordor属性详解

一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互…

何时使用padding和margin

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

CSS中padding、margin两个重要属性的详细介绍及举例说明

http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混…

行内元素的padding和margin是否无效

html中元素分为三种:块级元素.行内元素(也叫内联元素),内联块级元素. 常用块级元素:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一行) 2.元素的高度.宽度.行高以…

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法一.总结一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-sizing的三个属性分别是什么? 根据意思来记很好记的值一.content-box (向外边框) 值二.border-box (向内边框) 值三.inherit (继承爸爸) 2.设置边框的样式用什么属性? box-sizing box-sizing:border-box; 二.div宽度设置wi…

Android零基础入门第27节：正确使用padding和margin

原文:Android零基础入门第27节:正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout线性布局的内边距和外边距. 关于padding和margin,很多同学傻傻分不清,相信通过今天的学习可以正确使用. 一.内边距padding 默认情况下,组件相互之间是紧紧靠在一起的.但是有时候需要组件各边之间有一定的内边距,那就可以通过以下几个属性来设置,内边距的值是具体的尺寸,如5dp. and…

CSS——简写属性（在padding和margin这样的简写属性中，值赋值的顺序是top、right、bottom、left）

/* 在padding和margin这样的简写属性中,值赋值的顺序是top.right.bottom.left. 它们还有其他简写方式,例如给padding两个值,则第一个值表示top/bottom,第二个值表示left/right */ padding: 10px 15px 15px 5px;…

CSS中 Padding和Margin两个属性的详细介绍和举例说明

代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name=…

盒子模型的overflow属性，border属性，padding与margin属性

今天要写的是CSS布局—盒子模型首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(content),边条(sidebar),页脚(footer). 具体图下图所示: ㈠概念与组成 1.页面上区域,图片,导航,列表,段落都可以是盒子. 2.页面中的所有元素都可以看成一个盒子,占据着一定的页面空间. 3.组成:内容(content),高度(height),宽度(width),边框(bo…

盒模型大小取决于它的padding，margin，border数值

盒模型规定了元素框处理元素内容width与height值.内边距padding.边框border 和外边距margin 的数值大小.边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容区域的宽度+2(内边距+外边距+边框),也就是该示例中的元素宽度为170px,需要注意的是在 css 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸.(浏览器查看的时候…

定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时

定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素的宽度 Width .不论是上下内外边距,还是左右内外边距,均是相对于其父元素的宽度 Width .即上下内外边距与左右内外边距一致:即上下内外边距的百分数会相对于父元素宽度设置,而不是相对于高度.…

行内元素的padding和margin是否有效

行内元素的纵向padding和margin都是不考虑的,这是css规范定义的.inline元素确实可以设置垂直方向的padding和margin值,但是inline元素的margin和padding的垂直方向上不产生边距效果,即不影响布局. 1.首先行内元素是否具有盒子模型?答:行内元素同样具有盒子模型. 2.行内元素的padding.margin是否无效?答: 行内元素的padding-top.padding-bottom.margin-top.margin-bottom属性设置是无效的: 行…

【padding与margin的差别】的更多相关文章