zoukankan      html  css  js  c++  java
  • CSS填充padding实例

    在一个声明中的所有填充属性

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>a</title>
    <style>
    p.ex1 {padding:2cm;}
    p.ex2 {padding:0.5cm 3cm;}
    </style>
    </head>
    
    <body>
    <p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
    <p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米,左右的填充边距为3厘米。</p>
    </body>
    </html>

    设置左部填充

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>1</title>
    <style>
    p.padding {padding-left:2cm;}
    p.padding2 {padding-left:50%;}
    </style>
    </head>
    
    <body>
    <p>这是一个没有左填充边距的文本。</p>
    <p class="padding">这个文本的左填充边距为2厘米。</p>
    <p class="padding2">这个文本的左填充边距为50%。</p>
    </body>
    </html>

     设置右部填充

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>1</title>
    <style>
    p.padding {padding-right:2cm;}
    p.padding2 {padding-right:50%;}
    </style>
    </head><body>
    <p>这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。</p>
    <p class="padding">这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。</p>
    <p class="padding2">这个文本的右填充边距为50%。这个文本的右填充边距为50%。这个文本的右填充边距为50%。</p>
    </body>
    </html>

    设置上部填充

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>1</title>
    <style>
    p.padding {padding-top:2cm;}
    p.padding2 {padding-top:50%;}
    </style>
    </head>
    
    <body>
    <p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
    <p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
    <p class="padding2">这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。</p>
    </body>
    </html>

     设置下部填充

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>1</title>
    <style>
    p.padding {padding-bottom:25px;}
    p.padding2 {padding-bottom:50%;}
    </style>
    </head>
    
    <body>
    <p>这是一个没有底部填充边距的文本。这是一个没有底部填充边距的文本。这是一个没有底部填充边距的文本。</p>
    <p class="padding">这个文本的底部填充边距为2厘米。这个文本的底部填充边距为2厘米。这个文本的底部填充边距为2厘米。</p>
    <p class="padding2">这个文本的底部填充边距为50%。这个文本的底部填充边距为50%。这个文本的底部填充边距为50%。</p>
    </body>
    </html>

  • 相关阅读:
    Visualizing Concurrency in Go · divan's blog
    Trac常用插件描述!
    分布式 OLTP 数据库
    【SDCC讲师专访】PingCAP联合创始人兼CEO刘奇:好的产品应开源,不闭门造车-CSDN.NET
    XiaoMi/themis: Themis provides cross-row/cross-table transaction on HBase based on google's percolator.
    TiDB首页、文档和下载
    TeamGantt vs JIRA 2016 Comparison | FinancesOnline
    HandlerInterceptor拦截实现对PathVariable变量的读取
    大叔来说说Markdown的使用
    springcloud~配置中心实例搭建
  • 原文地址:https://www.cnblogs.com/mjhjl/p/14901763.html
Copyright © 2011-2022 走看看