zoukankan      html  css  js  c++  java
  • CSS 外边距

    CSS 外边距
    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

    设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

    ################

    CSS 外边距属性
    属性 描述
    margin 简写属性。在一个声明中设置所有外边距属性。
    margin-bottom 设置元素的下外边距。
    margin-left 设置元素的左外边距。
    margin-right 设置元素的右外边距。
    margin-top 设置元素的上外边距。
    ####################

    1.设置文本的左外边距
    本例演示如何设置文本的左外边距。
    <style type="text/css">
    p.leftmargin {margin-left:1cm}
    </style>
    </head>
    <body>
    <p>这个段落没有指定</p>
    <p class="leftmargin"> 这个段落带有指定的左外边距</p>
    </body>

    2.设置文本的右外边距
    本例演示如何设置文本的右外边距。
    <style type="text/css">
    p.rightmargin {margin-right: 8cm}
    </style>
    </head>
    <body>
    <p>这个段落没有指定</p>
    <p class="rightmargin"> 这个段落带有指定的右外边距。</p>
    </body>

    3.设置文本的上外边距
    本例演示如何设置文本的上外边距。
    <style type="text/css">
    p.topmargin {margin-top: 5cm}
    </style>
    </head>
    <body>
    <p>这个段落没有指定</p>
    <p class="topmargin"> 这个段落指定了上外边距。</p>
    </body>

    4.设置文本的下外边距
    本例演示如何设置文本的下外边距。

    <style type="text/css">
    p.bottommargin {margin-bottom:2cm}

    </style>
    </head>
    <body>
    <p>这个段落没有指定外边距</p>
    <p class="bottommargin">这个段落指定了外边距。</p>
    </body>

    5.所有的外边距属性在一个声明中。
    本例演示如何将所有的外边距属性设置于一个声明中。
    <style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
    </style>
    </head>

    <body>

    <p>这个段落没有指定外边距。</p>

    <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>

    <p>这个段落没有指定外边距。</p>

    </body>

  • 相关阅读:
    java 多线程(synchronized)
    java 多线程(daemon)
    【转】 Nginx深入详解之多进程网络模型
    Linux 网络编程(epoll)
    Linux 网络编程(多路复用)
    Linux 网络编程(UDP)
    Linux 网络编程(TCP)
    STM32F0xx_看门狗(独立+窗口)配置详细过程
    STM32F0xx_FLASH编程(片内)配置详细过程
    STM32F0xx_RTC实时时钟配置详细过程
  • 原文地址:https://www.cnblogs.com/zoulixiang/p/9969440.html
Copyright © 2011-2022 走看看