- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS margin外边距外间距 即div与div间距.doc
CSS margin外边距外间距 即div与div间距
CSS?外边距,div与div间距设置基础之css margin?DIV CSS margin外边距外补白边距样式属性margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。
目录
margin语法与应用结构
css margin缩写简写
常用的margin样式
css margin用法案例
css margin总结
一、margin基础语法与结构??
DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。
1、margin语法Margin:10pxMargin的值是数字+html单位,同时也可以为auto(自动、自适应)
2、应用结构Div{margin:10px}设置div对象四边间距为10px
3、Margin说明margin是设置对象外边距外延边距离。margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto 自动);可以为百分比(%)值(margin-left:3%)。
Margin延伸(单独设置四边间距属性单词)margin-left?对象左边外延边距 (margin-left:5px; 左边外延距离5px)margin-right?对象右边外延边距 (margin-right:5px; 右边外延距离5px)margin-top?对象上边外延边距 (margin-top:5px; 上边外延距离5px)margin-bottom?对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)
常见margin使用场景
4、margin实际应用地方两个布局之间距离设置。如上图中“CSS手册”和“DIV CSS研教室”黄颜色的背景之间空隙(背景土红)。
二、css margin缩写简写?
margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。你可能需要了解:CSS优化-CSS压缩:/jiqiao/j97.shtml你可能需要了解:HTML优化-HTML代码优化压缩:/jiqiao/j326.shtml
1、只有上下情况缩写原始:margin-top:5px; margin-bottom:6px缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto
2、只有左右情况缩写原始:margin-left:5px; margin-right:6px缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px
3、只有三边情况缩写原始:margin-top:5px; margin-bottom:6px; margin-left:4px缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px
4、四边相同值缩写原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px缩写:margin:5px;
5、四边不同值缩写原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px缩写:margin:5px 8px 6px 7px;
6、四边其中上下值和左右值各相同缩写
上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px缩写:margin:5px 7px;
Margin简写分析图:
css div?margin样式简写语法应用分析图
三、常用的margin样式 ?
1、用margin设置对象盒子间距我们常用margin设置2个盒子之间距离,无论上下左右的距离我们均可以利用margin实现间隔。
实际可用margin地方示图
2、利用margin实现布局居中,基础单词:marign:0 auto;即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中
您可能关注的文档
- 300型压面机和微型压面机价格.docx
- 32、徐童保树(最新课件).ppt
- 3305高档普采工作面作业规程.doc
- 3D比色,Vita_3D-MASTER比色板1.ppt
- 3D浏览器比较.docx
- 3《别母》唱词.ppt
- 3妈妈的手.ppt
- 3最大切应力.ppt
- 3桥架弯头的画法与切法.ppt
- 4 我给邻居当保镖.ppt
- 山东省威海市2023-2024学年高一年级下册期末考试语文试题及答案.pdf
- 2024-2025学年绥化市高二数学上学期开学考试卷(附答案解析).pdf
- 2024届贵州省贵阳某中学联考高考模拟预测地理试题(含答案解析).pdf
- 2024年公务员考试行测常识判断复习讲义.pdf
- 2024年广东学法考试试题附答案(考场一).pdf
- 2024年人教版八年级物理复习讲义:功 专项训练【五大题型】原卷版.pdf
- 江苏省泰州市高港区等2地2023-2024学年九年级上学期期中语文试题.pdf
- 酒店概论及酒店管理培训考试题库.pdf
- 湖北省旅游类《酒店服务》技能高考历年考试试题库(含答案).pdf
- 泰安市2025年中考一模考试物理试题(A)含解析.pdf
文档评论(0)