Css边距

Css边距分为内(padding)、外(margin)两种边距:

自扩展(-top,-bottom,-lef,-right);

可用计算数值: auto, length(规定以具体单位计的外边距值,比如像素、厘米等. 默认值是 0px),%百分比,inherit(继承).



我给自己看的笔记,请不要小白误解上面的话。

时间: 2024-10-09 02:14:31

Css边距的相关文章

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

CSS边距---盒子模型

CSS盒子模型 盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所见的盒子也就是装东西的箱子,也具有这些属性,所以叫它盒子模型 其中content(内容)又可以有两个元素width(宽)和height(高) CSS边框样式 可以使用border-style来设置边框的样式,也可以分别来设置上下左右的样式: border-top-style border-left-

CSS 外边距(margin)重叠及防止方法

CSS 外边距(margin)重叠及防止方法 胡俊涛 | 2011-11-17 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成. 但是边界的重叠也有例外情况: 1.水平边距永远不

css内边距与外边距的区别

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

Css 外边距折叠(collapsed margin ) 浅析

Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting

CSS 内边距与外边距

写项目的时候一直用到边距,今天用了一下午的时间好好研究了一下边距,发现CSS边距并非那么简单.这里就和大家分享一下: 一.内边距 如下面代码 html: <div class="test"><div> css: .test{ width:100px; height:100px; background-color:#fbc; padding:10px 20px 30px 40px; } 这时候在这个div中会形成一个内容框它里顶部边框距离为10px,右边20px,

CSS外边距合并(折叠)问题。

CSS外边距合并 块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大值,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并.注意浮动元素和绝对定位元素的外边距不会折叠. 下面列出了会发生外边距折叠的三种基本情况: 相邻元素之间 毗邻的两个元素之间的外边距会折叠(除非后一个元素需要清除之前的浮动). 父元素与其第一个或最后一个子元素之间 如果在父元素与其第一个子元素之间不存在边框.内边距.行内内容,也没有创建块格式化上下文.或者清除浮

CSS 内边距 padding 属性

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

关于CSS外边距塌陷的问题

关于CSS外边距塌陷(合并)的问题主要资料来源:https://developer.mozilla.org... 定义 块的顶部外边距和底部外边距有时被组合(折叠)为单个边框,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(合并) 发生外边距塌陷的三种情况 相邻的兄弟姐妹元素 <style> * { margin: 0; } .box1 { width: 150px; height: 100px; margin-bottom: 50px; /* border: 1px solid #0