• [HTML/CSS]margin属性用法


    概述

    在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的。上篇文章中介绍的盒子模型中,就有margin的存在。

    margin

    margin可以用来设置css块级元素之间的距离。

            * {
                /*距左元素块距离(设置距左内边距)*/
                margin-left: 0px;
                /*距右元素块距离(设置距右元素块距) */
                margin-right: 0px;
                /*底元素块距离(设置距低(下)元素块距)*/
                margin-bottom: 0px;
                /*距头顶(上)元素块距离(设置距顶部元素块距离)*/
                margin-top: 0px;
            }

    除了使用像素外,还可以使用百分比的方式

     1         * {
     2             /*距离左元素块距10像素,可跟百分比如(margin-left:10%;   距离左元素块10%的距离)*/
     3             margin-left: 10px;
     4             /*距离右边元素块距10像素,可跟百分比如(margin-right:10%; 距离右边元素块10%的距离) */
     5             margin-right: 10px;
     6             /*距离低边元素块距10像素,可跟百分比如(margin-bottom:10%; 距离底边元素块10%的距离)*/
     7             margin-bottom: 10px;
     8             /*距离顶边元素块距10像素,可跟百分比如(margin-top:10%; 距离顶边元素块10%的距离)*/
     9             margin-top: 10px;
    10         }

    可以有更简单的方式来写:

     1        div {
     2             margin: 10px;
     3             /*意思就是上下左右元素块距离就是10px(10像素)等于*/
     4             /*margin-top: 10px;
     5             margin-bottom: 10px;
     6             margin-left: 10px;
     7             margin-right: 10px;*/
     8             margin: 5px 10px;
     9             /*意思上下元素块距离为5px,左右的元素块距离为10px,等于*/
    10             /*margin-top: 5px;
    11             margin-bottom: 5px;
    12             margin-left: 10px;
    13             margin-right: 10px;
    14           */
    15             margin: 5px 6px 7px;
    16             /*意思上元素块距离5px,下元素块距离为7PX,左右元素块距离为6px,等于*/
    17             /*margin-top: 5px;
    18             margin-bottom: 7px;
    19             margin-left: 6px;
    20             margin-right: 6px;*/
    21             margin: 5px 6px 7px 8px;
    22             /*意思上元素块为5px,右元素块距离为6px ,下元素块距离为7px,左元素块距离8px,等于*/
    23             /*margin-top: 5px;
    24             margin-right: 6px;
    25             margin-bottom: 7px;
    26             margin-right: 8px;*/
    27         }

    其中:margin:5px 6px 7px 8px是按照顺时针的方向设置值的。
    参考:http://www.divcss5.com/shili/s6.shtml

  • 相关阅读:
    【leetcode】Edit Distance (hard)
    【leetcode】 Interleaving String (hard)
    【leetcode】Regular Expression Matching (hard) ★
    【leetcode】Wildcard Matching(hard) ★ 大神太牛了
    【leetcode】 Longest Valid Parentheses (hard)★
    【leetcode】 Scramble String (hard)★
    【leetcode】Maximal Rectangle (hard)★
    【leetcode】 Unique Binary Search Trees (middle)☆
    【计算机网络】应用层1
    【leetcode】Minimum Path Sum(easy)
  • 原文地址:https://www.cnblogs.com/wolf-sun/p/4026651.html
Copyright © 2020-2023  润新知