当前位置: 首页 > news >正文

padding和margin的区别和作用及各种场合出现的bug

一、padding

 Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离

1、语法结构

(1)padding-left:10px; 左内边距

(2)padding-right:10px; 右内边距

(3)padding-top:10px; 上内边距

(4)padding-bottom:10px; 下内边距

(5)padding:10px; 四边统一内边距

(6)padding:10px 20px; 上下、左右内边距

(7)padding:10px 20px 30px; 上、左右、下内边距

(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

二、margin

  Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。

1、语法结构

(1)margin-left:10px; 左外边距

(2)margin-right:10px; 右外边距

(3)margin-top:10px; 上外边距

(4)margin-bottom:10px; 下外边距

(5)margin:10px; 四边统一外边距

(6)margin:10px 20px; 上下、左右外边距

(7)margin:10px 20px 30px; 上、左右、下外边距

(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

 

三、margin和padding的区别用图表示为

 

 IE8下input[button | submit] 设置margin:auto无法居中bug:

  发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。

  解决方法:可以给为input加上宽度。

IE8百分比padding垂直margin bug:

  发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。

  解决方法:给父元素加一个overflow:hidden/auto。

IE6/7下margin与absolute元素重叠bug:

  发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

  解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。

转载于:https://www.cnblogs.com/king-govern/p/8191007.html

相关文章:

  • 第 51 章 DML (Data Manipulation Language)
  • html2练习
  • C++查缺补漏,赶紧的
  • Mac批量转换mp3为caf
  • RxSwift
  • 1.3. 服务器部署与网络拓扑
  • MySQL 大表优化方案
  • 004-unity3d MonoBehaviour脚本方法简介
  • JS-DOM的知识点及应用
  • 怎样做网站优化才能更有效的吸引蜘蛛来访?
  • centos--git搭建之Gogs安装
  • 记一次kafka故障
  • Visual Studio Code支持JUnit
  • “大数据应用场景”之隔壁老王(连载四)
  • vfp9写的爬虫前段,基于webbrowser
  • AWS实战 - 利用IAM对S3做访问控制
  • es6--symbol
  • JavaScript函数式编程(一)
  • JavaScript设计模式系列一:工厂模式
  • Java比较器对数组,集合排序
  • Java多态
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • magento2项目上线注意事项
  • webpack入门学习手记(二)
  • 关于List、List?、ListObject的区别
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 京东美团研发面经
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 探索 JS 中的模块化
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • 从如何停掉 Promise 链说起
  • 翻译 | The Principles of OOD 面向对象设计原则
  • 进程与线程(三)——进程/线程间通信
  • ​【已解决】npm install​卡主不动的情况
  • ​ArcGIS Pro 如何批量删除字段
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)springboot教学评价 毕业设计 641310
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (一一四)第九章编程练习
  • (转)关于pipe()的详细解析
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets?
  • .NET Core引入性能分析引导优化
  • .NET 事件模型教程(二)
  • .Net(C#)常用转换byte转uint32、byte转float等
  • .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)
  • .NET的数据绑定
  • .NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】
  • @Bean, @Component, @Configuration简析
  • @Repository 注解
  • [ JavaScript ] JSON方法
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • [1181]linux两台服务器之间传输文件和文件夹
  • [Big Data - Kafka] kafka学习笔记:知识点整理