css中边距问题

(1)所有浏览器都支持padding属性 (2)任何版本IE都不支持属性值“inherit”二、margin 1、语法结构 (1)margin-left:10px; 左外边距 (2)margin-right:10px; 右外边距 (3)margin-top:10px; 上外边距 (4)margin-bottom:10px; 下外边距 (5)margin:10px; 四边统一外边距 (6)margin...
css中边距问题
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
下面讲解 padding和margin常用的用法
一、padding
1、语法结构
(1)padding-left:10px; 左内边距
(2)padding-right:10px; 右内边距
(3)padding-top:10px; 上内边距
(4)padding-bottom:10px; 下内边距
(5)padding:10px; 四边统一内边距
(6)padding:10px 20px; 上下、左右内边距
(7)padding:10px 20px 30px; 上、左右、下内边距
(8)padding:10px 20px 30px 40px; 上、右、下、左内边距
2、可能取的值
(1)length 规定具体单位记的内边距长度
(2)% 基于父元素的宽度的内边距的长度
(3)auto 浏览器计算内边距
(4)inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
(1)所有浏览器都支持padding属性
(2)任何版本IE都不支持属性值“inherit”
二、margin
1、语法结构
(1)margin-left:10px; 左外边距
(2)margin-right:10px; 右外边距
(3)margin-top:10px; 上外边距
(4)margin-bottom:10px; 下外边距
(5)margin:10px; 四边统一外边距
(6)margin:10px 20px; 上下、左右外边距
(7)margin:10px 20px 30px; 上、左右、下外边距
(8)margin:10px 20px 30px 40px; 上、右、下、左外边距
2、可能取的值
(1)length 规定具体单位记的外边距长度
(2)% 基于父元素的宽度的外边距的长度
(3)auto 浏览器计算外边距
(4)inherit 规定应该从父元素继承外边距

3、浏览器兼容问题
(1)所有浏览器都支持margin属性
(2)任何版本IE都不支持属性值“inherit”

margin和padding的区别用图表示为:

2015-11-21
需要在里面加入float: left;2015-11-21
mengvlog 阅读 447 次 更新于 2025-10-31 17:41:03 我来答关注问题0
  •  石头自学建站 css中 marage-left:-25等于marage-right:25吗?

    2. margin-right和margin-bottom这两者的参考对象是以自己本身的右边和下边(或者说div本身不动,只有它的右边距和下边距从他本身边的位置开始向外延伸出来边距。)A:如果div在盒子box内,div相对于box没有任何位移,而div只产生了逻辑上透明的右和下外边距。对box本身也没有直接影响。(但间接的,属...

  •  誉祥祥知识 CSS 常见问题索引

    8. 垂直间距问题(Spacing-Vertical)问题示例:为什么这个元素上方/下方有意外的间距?解答:margin和padding属性:检查这些属性是否设置了意外的值。行高:对于包含文本的块级元素,line-height属性会影响其垂直间距。相邻元素的外边距折叠:相邻的块级元素可能会因为外边距折叠而产生意外的垂直间距。9. 元素...

  •  书香学编程 css属性 overflow:hidden; 的用法?

    其实你这个的问题。是margin的基本问题。margin的top值在没有hidden的时候。是显示到了红色区域的外面去了。算是bug吧。在定义了hidden后。也就是吧显示范围限制了。他就将margin的top值的起始位置算到了红色区域里面。希望对你有帮助。另外。你可以尝试一下,如下结构两个div之间的距离是多少。我记得这...

  •  文暄生活科普 css中display:inline-block

    在CSS中,当需要让块级元素并排显示而避免IE下关于边距的Bug时,`display:inline-block`是一个常用的选择。这个属性让元素表现为内联对象,但内容仍以块级元素方式呈现,相邻元素能同行为一排,且允许空格。不过要注意,不是所有浏览器都支持`display:inline-block`,Opera、Safari和部分版本的Firefox支持...

  • 需要准备的材料分别有:电脑、浏览器、html编辑器。1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:button { margin-right: 10px;}。3、浏览器运行index.html页面,此时成功在2个按钮间插入了1个10px的空隙。

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部