zoukankan      html  css  js  c++  java
  • CSS 外边距和内填充

    一、模型:

    • margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
    • padding:           用于控制内容与边框之间的距离;   
    • Border(边框):     围绕在内边距和内容外的边框。
    • Content(内容):   盒子的内容,显示文本和图像。

    二、外边距

    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
    margin:10px 20px 20px 10px;
    
            上边距为10px
            右边距为20px
            下边距为20px
            左边距为10px
    
    margin:10px 20px 10px;
    
            上边距为10px
            左右边距为20px
            下边距为10px
    
    margin:10px 20px;
    
            上下边距为10px
            左右边距为20px
    
    margin:25px;
    
            所有的4个边距都是25px

    三、内填充

    单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

    设置同margine;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            .outer{
                margin: 0 auto;
                width: 80%;
    
            }
    
            .content{
                background-color: darkgrey;
                height: 500px;
    
            }
    
            a{
                text-decoration: none;
            }
    
            .page-area{
    
                text-align: center;
                padding-top: 30px;
                padding-bottom: 30px;
                background-color: #f0ad4e;
    
            }
    
            .page-area ul li{
                display: inline-block;
            }
    
    
           .page-area ul li a ,.page-area ul li span{
    
                display: inline-block;
                color: #369;
                height: 25px;
                width: 25px;
                text-align: center;
                line-height: 25px;
    
                padding: 8px;
                margin-left: 8px;
    
                border: 1px solid #e1e1e1;
                border-radius: 15%;
    
            }
    
           .page-area ul li .page-next{
               width: 70px;
               border-radius:0
           }
    
    
           .page-area ul li span.current_page{
               border: none;
               color: black;
               font-weight:900;
           }
    
           .page-area ul li a:hover{
    
               color: #fff;
               background-color: #2459a2;
           }
    
    
        </style>
    </head>
    <body>
    
    <div class="outer">
    
    <div class="content"></div>
    
    <div class="page-area">
    
                 <ul>
    
                     <li><span class="current_page">1</span></li>
                     <li><a href="#" class="page-a">2</a></li>
                     <li><a href="#" class="page-a">3</a></li>
                     <li><a href="#" class="page-a">4</a></li>
                     <li><a href="#" class="page-a">5</a></li>
                     <li><a href="#" class="page-a">6</a></li>
                     <li><a href="#" class="page-a">7</a></li>
                     <li><a href="#" class="page-a">8</a></li>
                     <li><a href="#" class="page-a">9</a></li>
                     <li><a href="#" class="page-a">10</a></li>
                     <li><a href="#" class="page-a page-next">下一页</a></li>
    
                 </ul>
    
    </div>
    
    </div>
    
    
    </body>
    </html>
  • 相关阅读:
    第七章 路由 68 路由-前端路由和后端路由的概念
    第六章 组件 67 使用ref获取DOM元素和组件引用
    第六章 组件 65-66 组件案例-发表评论功能的实现
    第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别
    第六章 组件 62 组件-组件定义方式的复习
    第六章 组件 61 动画-小球动画flag标识符的作用分析
    第六章 组件 60 组件切换-应用切换动画和mode方式
    第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换
    vscode代码格式化 空格的配置
    vim配置C++开发环境 win10
  • 原文地址:https://www.cnblogs.com/liuxiaowei/p/7574088.html
Copyright © 2011-2022 走看看