/*1 元素的各边都有 10 像素的内边距 四个值上.右.下.左 两个上下,左右 三个值:上,左右,下*/ /*p {padding: 10%;}*/ h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } /*下面这条规则把段落的内边距设置为父元素 width 的 10%:*/ p {padding: 10px 50px 100px 20px; background: re

一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 padding-left:长度|百分比 padding-right:长度|百分比 margin:元素外边距,指的是元素外边框到父元素的距离. 用法: margin:长度|百分比 margin-top:长度|百分比 margin-bottom:长度|百分比 margin-left:长度|百分比 mar

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 padding 属性可以改变上下左右的填充.   ⑶可能的值: ⑴length    定义一个固定的填充(像素, pt, em,等) ⑵%          使用百分比值定义一个填充 注意:padding 属性接受长度值或百分比值,但不允许使用负值.   ⑷示例1:如果你希望所有 h1 元素的各边都有

一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定.正常流中的元素很少有设定的高度. 外边距和内边距 如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距.为元素指定的内边距和外边距会影响元素的背景何时结束. 为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设

CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边距属性属性 描述padding 简写属性.作用是在一个声明中设置元素的所内边距属性.padding-bottom 设置元素的下内边距.padding-left 设置元素的左内边距.padding-right 设置元素的右内边距.padding-top 设置元素的上内边距.##############

定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠.不允许指定负内边距值. 注释:不允许使用负值. 默认值: 0 继承性: no 版本: CSS1 JavaScript 语法: object.style.paddingTop="10px" 可能的值 值 描述 length 规定以具体单位计的固定

http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. 在宽度和高度之外绘制元素的内边距和边框. border-box 为元素设定的宽度和高度决定了元素的边框盒. 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制. 通过从已设定

coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中非常的常见,必须对此有明确的把握,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面结合实例代码对margin外边距合并做一下总结.外边距合并概念:相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并.水平方向不存在此现象.外边

width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距).                    innerHeight() 方法返回元素的高度(包括内边距).                    outerWidth() 方法返回元素的宽度(包括内边距和边框).             outerHeight() 方法返回元素的高度(包括内边距和边框).        outerWidth(true) 方法返回元素的

实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2margin   padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. 设置一个P元素的填充: p { padding:10px 5px 15px 20px; /*上填充是 10px ,右填充是 5px ,下填充是 15px ,左填充是 20px*/ padding:10p

方法一: 文档地址:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing属性:    box-sizing: border-box; 抱歉,由于我的粗心,导致之前标题中的错误.目前已经改回来了. 再次强调一下,该属性包含元素的边框和内边距,不包含外边距!

全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减 它还有一个关键作用——让有边框的盒子正常使用百分比宽度.但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突 不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决. 推荐写法是 html { box-sizing: border-box; } *, *:before, *:after { box-sizing:

九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框出现在文档布局中,影响其他元素的框.比如一个高1inch的元素框出现在文档的开头,那么下面的元素框将至少从文档1 inch以下的位置出现. -------------------------------- * 宽度和高度 如下图最暗一个矩形框(内容区)的高度和宽度. 一个重要问题:高度和宽度属性不能

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <style> *{ margin : 0; padding : 0; } body{ background : #eee; } .box1{ width : 100px; height : 100px; background : pink; } .box2{ width : 50px; height :50px

情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{margin:0; padding:0;} .outerdiv{background: #;} .innerdiv{margin-top: 30px; background: #d33; height: 80px;} </style> <div class="outerdiv"

CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终的mar

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div class="box1"> <div class="box2"></div> </div> css样式: .box1{height:200px;width:200px;background:gray;} .box2{height:

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性