<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         body{

             background-color: #666;

         }

         h1{

             background-color: #fff;

             display: inline-block;

             height: 80px;

             width: 80px;

             /* 内边距 */

             padding: 2%;

             /* 外边距 */

             margin: 2%;

             /* 上、右、下、左 ->2% */

             margin: 2% 2% 2% 2%;

             /* 上下、左右 */

             margin: 2% 0;

             /* 上、左右、下 */

             margin: 2% 4% 2%;

         }

         /* 听说过负margin吗.... */

     </style>

 </head>

 <body>

     <h1></h1>

 </body>

 </html>

css - margin-padding的更多相关文章

  1. css margin padding 四个方向

    margin 和padding虽然有四个单独的方向属性,如margin-left,padding-bottom等等. 但是可以用margin:2px 3px 4px 5px     四个参数的含义:上 ...

  2. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  3. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  4. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  5. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  6. DIV+CSS布局重新学习之float/margin/padding

    之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...

  7. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  9. css之margin && padding讲解

    margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...

  10. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

随机推荐

  1. window下golang包管理glide使用说明

    golang是一门简洁高效的开发 语言,但是包管理一直是一个痛点,如图 : 很多开源项目特别是github.com中的大量应用golang.org和google.golang.org中的源码,且由于被 ...

  2. ttk.Treeview

    TTK的目的. TreeView控件的呈现层次结构,用户可以使用鼠标动作来显示或隐藏结构的任何部分. 与术语“树”的关联是由于编程实践:树结构是一个常见的程序设计.严格地说,在一个TreeView控件 ...

  3. sqlalchemy源代码阅读随笔（1）

    今天看的,是url.py模块,这个在create_engine中,起到的最用很大,其本质,就是对访问数据库的url,进行操作管里.我们可以直接访问这个类. 看一个简单的代码: from sqlalch ...

  4. catkin详细解释

    http://answers.ros.org/question/58498/what-is-the-purpose-of-catkin_depends/

  5. 【hdoj_1009】FatMouse's Trade

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1009< 本题用到贪心策略和结构体排序. 问题简化:现有资本M,N个房间,第i个房间对应着价格为F[i ...

  6. Laravel跳转回之前页面，并携带错误信息

    用Laravel5.1开发项目的时候,经常碰到需要携带错误信息到上一个页面,开发web后台的时候尤其强烈. 直接上: 方法一:跳转到指定路由,并携带错误信息 return redirect('/adm ...

  7. 计蒜客 30996.Lpl and Energy-saving Lamps-线段树(区间满足条件最靠左的值) (ACM-ICPC 2018 南京赛区网络预赛 G)

    G. Lpl and Energy-saving Lamps 42.07% 1000ms 65536K   During tea-drinking, princess, amongst other t ...

  8. (21)python Anaconda

    1.安装 Anaconda下载镜像      --官网下载太慢 https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 下载安装后 2.添加第三方源 管 ...

  9. tensorflow bilstm官方示例

    ''' A Bidirectional Recurrent Neural Network (LSTM) implementation example using TensorFlow library. ...

  10. APIO2017伪题解

    题目质量还是比较高的,只是当时澳大利亚方面出了一点问题?最后造成了区分度非常迷的局面. 纵观三道题,T1是披着交互外衣的提答题,T2是披着交互外衣的传统题,T3是一道据说近年来APIO最水的一道传统题 ...