padding

padding-top是在绿色边框内，从顶部向下移20像素位置，默认padding-top 为0时，红色边框为20像素高，通过padding-top属性，为顶部增加了20像素，这时顶部为40像素高，最小为0，负数无效，因为他是内边距属性

padding-bottom:20px为底部向下增加20像素，通过调试工具可以看到颜色重合这部分则为增加的内边距,bottom向下增加底部边距上限非常大，3.35544e+7px

padding-left:20px 为从左边开始向右增加20px ，最小为0px，3.35544e+7px为上限

padding-right:20px为从右向左增加20px,最小为0px，3.35544e+7px为上限

  <div style="background-color: green;height: 100px;">

         <div style="height: 20px;background-color: red;padding-top: 20px">

         </div>

     </div>
 <div style="height: 20px;background-color: #9B1C2E;padding: 20px">

如果只写padding

则会在红色框，会从上，右，下，左顺序在各边增加20像素

margin

margin-top：为向上及绿色边框上边框开始再向上增加20px像素，当减小到一定像素，这个绿色边框将会消失,最大增加上限3.35544e+7px

 <div style="height: 20px;background-color: red;margin-top: 20px">

如果为边框增加border:1px 属性，那么改为margin-left,则是在绿色边框内，将红色内边框从左向右缩20像素，最大为绿色边框宽度,

margin-right则将红色内边框从右向左缩20像素

margin-bottom将红色内边框底部向绿色边框底部增加

css记录的更多相关文章

  1. 不常用但是很实用的css记录

    本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一. 1.background-attachment  滚动视差    https://codepen.io/Chokcoco/p ...

  2. 学习CSS记录：CSS文件引入到HTML中

    1.直接写在标签元素中,通常称为行间样式.(优先级较高,有悖于结构与表现的分离,建议不使用) 例:<body style="background:red;"></ ...

  3. 学习CSS记录：选择符优先级

    1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. ------------------ ...

  4. CSS --记录

    CSS3与文字渐变光影流动动画效果实现 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/word ...

  5. 小白学习css记录

    一.复习 什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代 CSS的使用方式 style属性---> <h1 style="css属性"></h ...

  6. keyup实现在输入状态不发送搜索请求，停止输入后发送

    个人需求:通过keyup事件配合后台elasticsearch(弹性搜索),用户在输入状态不发送请求,等停止输入后发送请求. 这是个思考笔记,因为项目临时需要弹性搜索功能,所以临时想了这么个法子,方法 ...

  7. uni-app学习（二）

    1. uni-app学习(二) 1.1. 好用css记录 一定透明度的背景色background: rgba(255,255,255,.6); 1.2. 好用的代码段 store(用户登录) expo ...

  8. HTML-T

    a标签跳转 <a href="new_link" target="_blank">在新建页面打开链接</a>. <a href=& ...

  9. CodeForces 隐藏标签

    设置css 记录. 以防忘记.

随机推荐

  1. git gui 学习

    目的 自己以前使用过3,4个月的SVN,因为公司使用的是git,git gui.所以打算自学git gui,并记录一下学习心得.^_^ 原因 为什么不是学命令行而是用git gui呢.我觉得首先因为公 ...

  2. 今天又学了一招，牛逼！！！解决"-bash:No such file or directory"问题

    今天在64服务器上:发现好像bash 坏了,用户名前边   用-bash 显示,,前几天就发现这个问题,,,但是当时忙没有解决,,,,,今天来看看到底是怎么回事! File Exists but... ...

  3. Linux入门50指令

    1, mkdir创建目录 make directory 可以带着路径,在什么位置创建什么目录 如:mkdir /etc/date  在目录etc下创建date目录 重要参数 –p 递归创建,mkdir ...

  4. Go - 变量初始化 及 注意事项

    Go变量 初始化 对 复合类型(数组.切片.字典.结构体)变量的初始化是,有一些语法限制: 1.初始化表达式必须包含类型标签: 2.左花括号必须在类型尾部,不能另起一行: 3.多个成员初始值以逗号分隔 ...

  5. springmvc 表单提交

    Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...

  6. 多重网格法简介（Multi Grid）

    原文链接 多重网格法是一种用于求解方程组的方法,可用于插值.解微分方程等. 从专业角度讲多重网格法实际上是一种多分辨率的算法,由于直接在高分辨率(用于求解的间隔小)上进行求解时对于低频部分收敛较慢,与 ...

  7. hibernate中数据库方言

    在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...

  8. 2016年11月28日--ADO.Net 查、插、删、改 小练习

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. spring aop 环绕通知around和其他通知的区别

    前言: spring 的环绕通知和前置通知,后置通知有着很大的区别,主要有两个重要的区别: 1) 目标方法的调用由环绕通知决定,即你可以决定是否调用目标方法,而前置和后置通知   是不能决定的,他们只 ...

  10. 错误：The method replace(int, Fragment) in the type FragmentTransaction is not applicable for the arguments (int, MyFragment)

    Fragment newfragment =new MyFragment();fragmentTransaction.replace(R.layout.activity_main,newfragmen ...