• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:时时彩走势图后一 > DIV+CSS基础 >

    CSS基础必学列表

    CSS margin外边距外间距 即div与div间距

    时时彩走势图后一 www.cuhw.com.cn 时时彩走势图后一 外边距,时时彩走势图后一与div间距设置基础之css margin DIV CSS margin外边距外补白边距样式属性

    margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。

    目录
    1. margin语法与应用结构
    2. css margin缩写简写
    3. 常用的margin样式
    4. css margin用法案例
    5. css margin总结

    一、margin基础语法与结构   -  TOP

    时时彩走势图后一外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。

    1、margin语法
    Margin:10px
    Margin的值是数字+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用处示范图
    常见margin使用场景

    4、margin实际应用地方
    两个布局之间距离设置。
    css实例教程范例margin视图
    如上图中“CSS手册”和“DIV CSS研教室”黄颜色的背景之间空隙(背景土红)。

    二、css margin缩写简写  -  TOP

    margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
    你可能需要了解:CSS优化-CSS压缩//www.cuhw.com.cn/jiqiao/j97.shtml
    你可能需要了解:HTML优化-HTML代码优化压缩//www.cuhw.com.cn/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简写分析图:

    margin css样式简写优化分析图
    时时彩走势图后一 margin样式简写语法应用分析图

    三、常用的margin样式   -   TOP

    1、用margin设置对象盒子间距
    我们常用margin设置2个盒子之间距离,无论上下左右的距离我们均可以利用margin实现间隔。

    实际margin应用地方
    实际可用margin地方示图

    2、利用margin实现布局居中,基础单词:
    marign:0 auto;
    即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式,这里时时彩走势图后一提供一个css初始化模板时时彩走势图后一时候无需重复设置css text-align:center等初始化样式属性。

    四、css margin普通案例   -   TOP

    DIVCSS5设置2个盒子,为了体现margin作用,我们对其2盒子设置css border边框、一定css宽度css高度。

    1、margin用法css代码
    .divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1px solid #F00}
    .divcss5-bottom{ margin-top:10px}

    2、html代码片段
    <div class="divcss5-top">上对象</div>
    <div class="divcss5-bottom">下对象,我们设置了margin-top为10px间距</div>

    3、mairgin应用案例截图

    div+css margin实例案例效果截图
    margin实例实践案例效果图

    从上案例我们分析出margin是设置对象(比如div盒子、span盒子等)之间间距,并体现出margin是存在与对象盒子边框外侧。

    五、css margin总结   -   TOP

    Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。

    margin缺点:
    在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。
    您可能需要了解CSS兼容浏览器知识。

    你可以再了解以前时时彩走势图后一介绍margin知识://www.cuhw.com.cn/shili/s6.shtml。

    相关阅读
    CSS 颜色
    CSS 文本
    CSS padding
    CSS margin

    如需转载,请注明文章出处和来源网址://www.cuhw.com.cn/rumen/r128.shtml

    我要分享到:

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

     

    如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    时时彩走势图后一文章修订日期:2013-02-22 08:05 原创:时时彩走势图后一
    本文时时彩走势图后一 www.cuhw.com.cn DIVCSS5版权所有。

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13