• 技术文章 >web前端 >css教程

    css margin属性怎么用?css margin属性用法教程

    云罗郡主云罗郡主2018-11-07 14:14:12原创6206
    在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程。

    微信截图_20181107140945.png

    大前端零基础入门到就业:进入学习

    margin是css用于在一个声明中,对所有css margin属性的简写,正因为margin来控制css中的块级元素之间的距离,所以两者是不是可见的。【推荐学习:CSS3教程

    一:css margin属性怎么用

    margin属性包含了很多的属性,如下所示:

    margin left :是表示设置距左内边距;

    margin top:是表示设置头顶元素块状的距离;

    margin right:是表示设置距右元素块距离;

    margin bottom :是表示设置底部块状距离

    二:css margin属性用法教程

    1.margin left用法:

    margin left:50px;语法后面紧跟着数字或者百分比,该语法表示距离左边元素块50像素点,或者距离元素50%的距离。

    为了观察实例,我们使用两个盒子:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>margin-left实例 www.divcss5.com</title> 
    <style> 
    .php-a,.php-b 
    {float:left; width:150px; height:120px; border:1px solid #F00} 
    .php-b{ margin-left:50px} 
    .php-c{ margin-left:50px} 
    </style> 
    </head> 
    <body> 
    <div class="php-a"></div> 
    <div class="php-b"></div> 
    </body> 
    </html>

    我们可以改动数值,可以观察其中变化,但是效果都是元素左边间距的位置大小。

    2.margin right用法恰恰和margin left相反,定义为右边元素距离多少像素。

    3.margin top:50px,语法后面紧跟数字,就是表示上边间距50个像素点,也可以使用百分比来表示。

    4.margin bottom用法和margin top用法类似,并且在方向是相反的。

    假如我们想在上下左右都用margin:10px来表示,margin我们要按照顺时针转法的思维就好了。【推荐阅读:margin:auto属性的用法详解

    以上就是对css margin属性怎么用?css margin属性用法教程的全部介绍,如果您想了解更多有关CSS3视频教程,请关注PHP中文网。

    以上就是css margin属性怎么用?css margin属性用法教程的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:详解pointer-events属性的使用(代码示例) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• Css Margin Collapsing_html/css_WEB-ITnose• CSS margin重叠问题_html/css_WEB-ITnose• CSS marging浅析• CSS margin全面了解
    1/1

    PHP中文网