zoukankan      html  css  js  c++  java
  • 页面元素与页面间的间隙

    当我们做一个页面时,默认页面元素距页面左右上下都有一个很小的间隙。如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三角形</title>
    </head>
    <style>
        .three{
            width: 100px;
            height: 100px;
            border-style: solid;
            border-width: 1px;
        }
    </style>
    <body>
        <div class="three">
            
        </div>
    </body>
    </html>

    效果如下图所示:

    这是由于盒子模型中,默认的body与整个页面间的外边距不为0,将body的margin设置为0px即可消除该间隙。如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三角形</title>
    </head>
    <style>
        .three{
            width: 100px;
            height: 100px;
            border-style: solid;
            border-width: 1px;
        }
        body{
            margin: 0px;
        }
    </style>
    <body>
        <div class="three">
            
        </div>
    </body>
    </html>

    效果如下图所示:

  • 相关阅读:
    博客样式备份
    2018年终总结
    技术博客的太监
    LeetCode 日常填坑
    互联网之父
    TotoiseSVN的使用方法
    常用CMD命令
    量化策略
    浏览器加载js的阻塞与非阻塞
    Vue核心之数据劫持
  • 原文地址:https://www.cnblogs.com/yoran-yang/p/5296575.html
Copyright © 2011-2022 走看看