CSS padding margin border属性和布局

你的名字 2022-08-19 01:54 216阅读 0赞

W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

![20151230231647810][]

**一、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 规定应该从父元素继承外边距

可以参考：

[http://www.cnblogs.com/linjiqin/p/3556497.html][http_www.cnblogs.com_linjiqin_p_3556497.html]

[http://www.studyofnet.com/news/35.html][http_www.studyofnet.com_news_35.html]

[20151230231647810]: /images/20220731/5a6471ab0bce416c9f347e0f5e384eef.png
[http_www.cnblogs.com_linjiqin_p_3556497.html]: http://www.cnblogs.com/linjiqin/p/3556497.html
[http_www.studyofnet.com_news_35.html]: http://www.studyofnet.com/news/35.html

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML CSS 盒模型 DOM元素布局调试神器 padding border margin outline

文章目录 outline padding border margin outline outline 开发环境中，在页面中引入以下一句C

女爷i/ 2023年01月01日 07:53/ 0 赞/ 106 阅读

相关一图搞定CSS中的margin，border，padding

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

谁践踏了优雅/ 2022年12月28日 11:08/ 0 赞/ 155 阅读

相关 CSS padding margin border属性详解

图解CSS padding、margin、border属性 ![191935269513751.jpg][] W3C组织建议把所有网页上的对像都放在一个盒(box)

本是古典何须时尚/ 2022年09月25日 09:20/ 0 赞/ 174 阅读

相关 CSS padding margin border属性和布局

W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(co

你的名字/ 2022年08月19日 01:54/ 0 赞/ 217 阅读

相关 CSS实战手册_阅读笔记09_margin padding border

![Center][] [Center]: /images/20220810/903a734c6b1a419092a8d6cf03b06fd3.png

水深无声/ 2022年08月13日 19:56/ 0 赞/ 165 阅读

相关 HTML/CSS（五）margin padding border

![这里写图片描述][20151012231643687] > margin:外边距； > padding：内边距； > border：边框； > IE不支持边框

素颜马尾好姑娘i/ 2022年08月09日 05:26/ 0 赞/ 181 阅读

相关 margin,border,padding

百度空间技巧之边框(border)边距(margin)和间隙(padding)属性的区别边框属性(border)用来设定一个元素的边线。边距属性(margin)是用

素颜马尾好姑娘i/ 2022年06月11日 00:47/ 0 赞/ 210 阅读

相关 CSS padding、margin、border属性

转自：[http://www.cnblogs.com/linjiqin/p/3556497.html][http_www.cnblogs.com_linjiqin_p_3556

约定不等于承诺〃/ 2022年05月15日 12:13/ 0 赞/ 259 阅读

相关 margin、padding、border区分

margin 是设置两个标签的间隔，也就是距离； padding 这个是比如一个p标签，它是100px\100px,我们使用的时候p标签的文字是贴着p标签的最左侧的，想要

淡淡的烟草味﹌/ 2022年03月29日 05:54/ 0 赞/ 324 阅读

相关 01-border，padding，margin，color

border，padding，margin，color 之前我在潭州课程上上了一期vip课程，现在把纸笔的笔记整理出来，与大家分享。很少牵扯到css3，后续会跟进

太过爱你忘了你带给我的痛/ 2021年09月14日 03:36/ 0 赞/ 388 阅读