zoukankan      html  css  js  c++  java
  • web兼容学习分析笔记-margin 和padding浏览器解析差异

    二、margin 和padding浏览器解析差异

    只有默认margin的元素

    <body>margin:8px  margin:15px 10px 15px 10px(IE7)

    <blockquote> 定义长的引用  margin:18px 40px 18px 40px     margin:30px auto 30px auto(IE7)

    <dl> 定义列表详情 margin:18px 0 18px 0      margin:auto(IE7)

    <h1> margin:12.0667px 0 12.0667px 0 (firefox)      12.060px 0 12.060px 0(Google/Edge) 

    <h2> margin:14.9333px 0 14.9333px 0 (firefox)      14.940px 0 14.940px 0(Google/Edge)

    <h3> margin:18px 0 18px 0 (firefox) 

    <h4> margin:23.9333px 0 23.9333px 0 (firefox)      23.940px 0 23.940px 0(Google/Edge)

    <h5> margin:30.0667px 0 30.0667px 0 (firefox)      30.060px 0 30.060px 0(Google/Edge)

    <h6> margin:41.9333px 0 41.9333px 0 (firefox)      41.940px 0 41.940px 0(Google/Edge)

    <pre> 定义预格式文本 margin:18px 0 18px 0

    只有默认padding的元素

     <legend> 定义<fieldset>元素的标题 padding:0 2px 0 2px

     <p> 段落 padding:18px 0 18px 0

    默认同时拥有margin或padding或border二个以上的元素

    <fieldset> 定义围绕表单元素的边框 

    margin:0 2px 0 2px;    margin:auto(IE7)

    border:2px;    

    padding:6.3px 11.25px  13.5px  11.25px(firefox/Google)     6.3px 13.5px 11.16px 13.5px(Edge)

     <hr> 水平线

    margin:9px 0 9px 0;

    border:1px;

    其他:默认垂直居中,自动根据所处的位置定义其margin,使其处于垂直居中状态

    <ul> 无序列表 ,<ol> 有序列表

    margin:18px 0 18px 0  margin:auto auto auto 30px(IE7)

    padding:0 0 0 40px

    总结分析:

    1、火狐、谷歌、Edge、IE9以上几乎没有太大差别

    2、IE8以下立马就发现,那差别不是一般的大,是很大。

    3、因此通常前端在写页面之前会有一个通用性的开头:*{margin:0,padding:0}

    作者:leona

    原文链接:http://www.cnblogs.com/leona-d/p/5950280.html 

    版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
     
     
  • 相关阅读:
    First blog
    MyBatis Generator 配置详解
    JQueryValidate添加自定义方法校验密码
    MySQL学习(二)
    JVM原理讲解和调优
    一道HashMap面试题
    Nginx配置文件详细说明
    springboot系列文章之实现跨域请求(CORS)
    java多线程中的synchronized的byte[0]
    JVM常用命令
  • 原文地址:https://www.cnblogs.com/leona-d/p/6127353.html
Copyright © 2011-2022 走看看