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. 自定义cell自适应高度

    UITableView在许多App种被大量的应用着,呈现出现的效果也是多种多样的,不能局限于系统的一种样式,所以需要自定义cell 自定义cell呈现的内容也是多种多样的,内容有多有少,所以需要一种能 ...

  2. angularjs中父,子,兄之间controller值得传递

    使用angularjs,发现controller间的值传递,比较麻烦的,以后几篇文章会陆续说几种方法. 一,angularjs $broadcast $emit $on的处理思想 在一个control ...

  3. PHP定时备份MySQL,mysqldump语法大全

    几个常用操作: 1.备份 # 只导出表结构 d:/PHP/xampp/mysql/bin/mysqldump -h127.0.0.1 -P3306 -uroot -p123456 snsgou_sns ...

  4. 如何让Linux定时任务crond以秒为单位执行(如每隔3秒)

    需要用到Shell脚本每隔3秒钟去监控一个软件进程的运行状态,发现crond似乎只支持到分,不知道秒,怎么办呢? 第一种方法: 当然首先想到的是写一个触发的脚本,在触发脚本中使用死循环来解决此问题,如 ...

  5. jdbctemplate中的批量更新使用,BigDecimal与造型的联系和区别

    //jdbctemplate批量新增的使用MENU_ID_LIST是前端页面传递到后端控制层,再由控制层传到实现层的List //JdbcTemplate是spring jdbctemplate通过注 ...

  6. Matlab学习笔记(一)—— 三维图形绘制

    这学期公选课选的是MATLAB,所以准备把这学期所学习的整理到博客上,作为记录,哇咔咔~ 一.三维函数图: x=cos(t), y=sin(t), z=t %≤t ≤*pi t=:*pi; %t的取值 ...

  7. PHP PDO的setAttribute函数

    数据库的连接: $dsn = 'mysql:host=127.0.0.1;port=3306;dbname=cardslg'; $username = 'root'; $password = ''; ...

  8. 解决weblogic.net.http.SOAPHttpsURLConnection incompatible with javax.net.ssl.HttpsURLConnection

    1. 按照网上的办法,可以修改代码解决问题,但是由于我们使用的是别人的jar包,不能修改代码,: URL url = new URL(null, "https://www.baidu.&qu ...

  9. TFS二次开发系列:一、TFS体系结构和概念

    TFS是Team Fundation Server的简称,是微软VSTS的一部分,它是Microsoft应用程序生命周期管理(ALM)工具的核心协作平台,简单的说它是管理和开发软件项目的整个生命周期的 ...

  10. mysql知识

    1.Limit 在语句的最后,起到限制条目的作用 Limit [offset,] [N] offset:偏移量 N:取出条目 例子:select * from stu limit 3,3; 2.左连接 ...