<!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. 【 Linux 】Keepalived实现双主模型高可用集群

    要求:    1. 两台web服务器安装wordpress,数据库通过nfs共享    2. 使用keepalived实现双主模型 环境:    主机:        系统:CentOS6.7 x64 ...

  2. js的变量的有效域

    function test(o) { var i=0; if(typeof o=="object") { var j=1; for(var k=0;k<10;k++) { c ...

  3. rest_framework 访问频率(节流)流程

    访问频率流程 访问频率流程与认证流程非常相似,只是后续操作稍有不同 当用发出请求时 首先执行dispatch函数,当执行当第二部时: #2.处理版本信息 处理认证信息 处理权限信息 对用户的访问频率进 ...

  4. React Native - 3 View, Text简介以及onPress & onLongPress事件

    我们要生成如下的构图   直接上图,不解释.       如下图所示,定义函数,函数之间不需要逗号,在元素上添加事件,使用关键字this.{function name}    

  5. [BZOJ3944]Sum(杜教筛)

    3944: Sum Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 6201  Solved: 1606[Submit][Status][Discuss ...

  6. [BZOJ 2743] 采花

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=2743 Algorithm: 此题询问区间内出现次数超过1个的数字 明显在线做无从下手,无 ...

  7. 【枚举】【二分答案】【分块答案】【BFS】【最大流】【Dinic】bzoj1189 [HNOI2007]紧急疏散evacuate

    [法一]枚举Time(0~N*M): S->'.'(1); 'D'->T(Time); '.'->'D'(dis(用BFS预处理,注意一旦到达'D',BFS就不能继续扩展了,注意di ...

  8. python3全栈开发-并发编程，多线程

    一.什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...

  9. 数列求和 Exercise06_13

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:数列求和 * */ public class Exercise06_13 { public static void main( ...

  10. Java高级架构师（一）第18节：X-gen所需service、web层模板

    以X-gen的Controller为例: package $#modulePackge#.web; import org.springframework.beans.factory.annotatio ...