很多网站都对div设置{margin:0; padding:0;}对吗?Demo戳这里 - -
心里怀着这样的疑问,抱着试一试的态度,我们去看看常用的标签那些有默认的margin/padding?
FF 32.0:
==== Margin ==== h1,21.4333px,0px,21.4333px,0px h2,19.9167px,0px,19.9167px,0px h3,18.7167px,0px,18.7167px,0px h4,21.2833px,0px,21.2833px,0px h5,22.1833px,0px,22.1833px,0px h6,24.9667px,0px,24.9667px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,16px,0px,16px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px textarea,1px,0px,1px,0px textarea,1px,0px,1px,0px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,5.6px,10px,12px,10px legend,0px,2px,0px,2px input,2px,2px,2px,2px select,1px,1px,1px,1px option,0px,5px,0px,3px option,0px,5px,0px,3px textarea,2px,2px,2px,2px button,0px,6px,0px,6px select,1px,1px,1px,1px option,0px,0px,0px,20px option,0px,0px,0px,20px textarea,2px,2px,2px,2px
Chrome 36.0:
==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0px h2,19.920000076293945px,0px,19.920000076293945px,0px h3,18.719999313354492px,0px,18.719999313354492px,0px h4,21.280000686645508px,0px,21.280000686645508px,0px h5,22.17759895324707px,0px,22.17759895324707px,0px h6,27.959999084472656px,0px,27.959999084472656px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13px,0px,13px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px input,2px,2px,2px,2px keygen,2px,2px,2px,2px textarea,2px,2px,2px,2px button,2px,2px,2px,2px select,2px,2px,2px,2px textarea,2px,0px,2px,0px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,5.599999904632568px,12px,10px,12px legend,0px,2px,0px,2px input,1px,0px,1px,0px textarea,2px,2px,2px,2px button,1px,6px,1px,6px textarea,2px,2px,2px,2px
IE 10:
==== Margin ==== h1,21.44px,0px,21.44px,0px h2,19.92px,0px,19.92px,0px h3,18.73px,0px,18.73px,0px h4,21.28px,0px,21.28px,0px h5,22.15px,0px,22.15px,0px h6,25px,0px,25px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13.33px,0px,13.33px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,2px,2px,3px,2px legend,0px,2px,0px,2px input,2px,1px,2px,1px textarea,2px,2px,2px,2px button,3px,10px,3px,10px textarea,2px,2px,2px,2px
IE 9:
==== Margin ==== h1,21.44px,0px,21.44px,0px h2,19.92px,0px,19.92px,0px h3,18.73px,0px,18.73px,0px h4,21.28px,0px,21.28px,0px h5,22.15px,0px,22.15px,0px h6,25px,0px,25px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13.33px,0px,13.33px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,2px,2px,3px,2px legend,0px,2px,0px,2px input,2px,1px,2px,1px textarea,2px,2px,2px,2px button,3px,10px,3px,10px textarea,2px,2px,2px,2px
IE 8:
==== Margin ==== h3,1em,0em,1em,0em h4,1.33em,0em,1.33em,0em h5,1.67em,0em,1.67em,0em h6,2.33em,0em,2.33em,0em p,1em,0px,1em,0px ul,1em,0px,1em,0px ol,1em,0px,1em,0px dl,1em,0px,1em,0px dd,auto,auto,auto,40px hr,0.5em,auto,0.5em,auto pre,1em,0px,1em,0px fieldset,0px,2px,0px,2px blockquote,1em,40px,1em,40px ==== Padding ==== ul,0px,0px,0px,30pt ol,0px,0px,0px,30pt th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,0px,2px,3px,2px legend,0px,2px,0px,2px input,2px,1px,2px,1px textarea,2px,2px,2px,2px button,3px,10px,3px,10px textarea,2px,2px,2px,2px
IE 7:
==== Margin ==== ul,auto,auto,auto,30pt ol,auto,auto,auto,30pt dd,auto,auto,auto,30pt blockquote,auto,30pt,auto,30pt ==== Padding ==== caption,1px,300zzz,500zzz,300zzz th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,0px,2px,3px,2px legend,0px,2px,0px,2px input,2px,1px,2px,1px textarea,2px,2px,2px,2px button,1px,0.5px,1px,0.5px textarea,2px,2px,2px,2px
IE 6:
==== Margin ==== ul,auto,auto,auto,30pt ol,auto,auto,auto,30pt dd,auto,auto,auto,30pt blockquote,auto,30pt,auto,30pt ==== Padding ==== caption,1px,3px,5px,3px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,0px,2px,3px,2px legend,0px,2px,0px,2px input,1px,1px,1px,1px textarea,2px,2px,2px,2px textarea,2px,2px,2px,2px
搜狗:
==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0px h2,19.920000076293945px,0px,19.920000076293945px,0px h3,18.719999313354492px,0px,18.719999313354492px,0px h4,21.280000686645508px,0px,21.280000686645508px,0px h5,22.17759895324707px,0px,22.17759895324707px,0px h6,27.959999084472656px,0px,27.959999084472656px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13px,0px,13px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px input,2px,2px,2px,2px keygen,2px,2px,2px,2px textarea,2px,2px,2px,2px button,2px,2px,2px,2px select,2px,2px,2px,2px textarea,2px,0px,2px,0px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,5.599999904632568px,12px,10px,12px legend,0px,2px,0px,2px input,1px,0px,1px,0px textarea,2px,2px,2px,2px button,1px,6px,1px,6px textarea,2px,2px,2px,2px
360 安全:
==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0px h2,19.920000076293945px,0px,19.920000076293945px,0px h3,18.719999313354492px,0px,18.719999313354492px,0px h4,21.280000686645508px,0px,21.280000686645508px,0px h5,22.17759895324707px,0px,22.17759895324707px,0px h6,27.959999084472656px,0px,27.959999084472656px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13px,0px,13px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px input,2px,2px,2px,2px keygen,2px,2px,2px,2px textarea,2px,2px,2px,2px button,2px,2px,2px,2px select,2px,2px,2px,2px textarea,2px,0px,2px,0px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,5.599999904632568px,12px,10px,12px legend,0px,2px,0px,2px input,1px,0px,1px,0px textarea,2px,2px,2px,2px button,1px,6px,1px,6px textarea,2px,2px,2px,2px
Opera 24.0:
==== Margin ==== h1,21.4400005340576px,0px,21.4400005340576px,0px h2,19.9200000762939px,0px,19.9200000762939px,0px h3,18.7199993133545px,0px,18.7199993133545px,0px h4,21.2800006866455px,0px,21.2800006866455px,0px h5,22.1775989532471px,0px,22.1775989532471px,0px h6,27.9599990844727px,0px,27.9599990844727px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13px,0px,13px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px input,2px,2px,2px,2px keygen,2px,2px,2px,2px textarea,2px,2px,2px,2px button,2px,2px,2px,2px select,2px,2px,2px,2px textarea,2px,0px,2px,0px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,5.59999990463257px,12px,10px,12px legend,0px,2px,0px,2px input,1px,0px,1px,0px textarea,2px,2px,2px,2px button,1px,6px,1px,6px textarea,2px,2px,2px,2px
Safari 5.17:
==== Margin ==== h1,21px,0px,21px,0px h2,19px,0px,19px,0px h3,18px,0px,18px,0px h4,21px,0px,21px,0px h5,22px,0px,22px,0px h6,24px,0px,24px,0px p,16px,0px,16px,0px ul,16px,0px,16px,0px ol,16px,0px,16px,0px dl,16px,0px,16px,0px dd,0px,0px,0px,40px hr,8px,0px,8px,0px pre,13px,0px,13px,0px figure,16px,40px,16px,40px fieldset,0px,2px,0px,2px blockquote,16px,40px,16px,40px input,2px,2px,2px,2px keygen,2px,2px,2px,2px textarea,2px,2px,2px,2px button,2px,2px,2px,2px select,2px,2px,2px,2px textarea,2px,0px,2px,0px ==== Padding ==== ul,0px,0px,0px,40px ol,0px,0px,0px,40px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,5px,12px,10px,12px legend,0px,2px,0px,2px input,1px,0px,1px,0px textarea,2px,2px,2px,2px button,1px,6px,1px,6px select,2px,21px,2px,4px textarea,2px,2px,2px,2px
常用块元素及特点:
<!-- 块元素:独占一行,宽(100%)、高、行高、padding、margin可控 --> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <p>p</p> <ul> <li>无序列表</li> </ul> <ol> <li>有序列表</li> </ol> <dl> <dt>自定义列表项目</dt> <dd>自定义列表描述</dd> </dl> <table> <caption>表格标题</caption> <!-- 设置表格中列 --> <col align="right" /> <thead> <tr> <th>表格头栏目</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> </tr> </tbody> <tfoot> <!-- 设置表格中多列 --> <colgroup span="1" align="left"></colgroup> <tr> <td>表格单元格</td> </tr> </tfoot> </table> <div>div</div> <nav></nav> <header>header</header> <footer>footer</footer> <section>section</section> <article>article</article> <aside>aside</aside> <hr /> <pre>预格式文本</pre> <canvas></canvas> <audio> <source src="no.ogg" type="audio/ogg"> </audio> <video> <source src="no.ogg" type="video/ogg"> </video> <datalist> <option value="a">a</option> </datalist> <figure> <figcaption>标题</figcaption> </figure> <form action=""> <fieldset> <legend>表单标题:</legend> </fieldset> </form> <address>文档作者或拥有者的联系信息</address> <blockquote>块引用</blockquote>
常用内联元素及特点:
<!-- 内联元素:不独占一行,宽、高、行高、竖向padding、竖向margin不可控 --> <span>span</span> <strong>强调文本</strong> <em>强调文本</em> <a href=""></a> <label>label:</label> <b>粗体文本</b> <var>文本中的变量</var> <bdo dir="rtl">定义文字方向ltr/rtl</bdo> <code>代码</code> <del>被删除文本</del> <i>斜体文本</i> <ins>被插入文本</ins> <small>小号文本</small> <sup>上标</sup> <sub>下标</sub> <time datatime="2008-08-08">日期/时间</time> <br /> <wbr>在文本中何处换行</wbr> <q>短引用</q>
常用内联块元素及特点:
<!-- 内联块元素:不独占一行,宽、高、行高、padding、margin可控 --> <input type="text"> <keygen name="security" /> <textarea>多行文本</textarea> <button>按钮</button> <select> <optgroup> <option>选项1-1</option> </optgroup> <optgroup> <option>选项2-1</option> </optgroup> </select> <iframe frameborder="0" src=""></iframe> <img usemap="#map" src="" alt="" /> <map name="map" id="map"> <area shape="rect" coords="0, 0, 20, 20" href="" alt=""> </map> <embed src="no.swf"> <object> <param name="min" value="0" /> </object> <!-- 预定义范围内的度量 --> <meter value="3" min="0" max="10">3/10</meter> <!-- progress 进度 --> <progress value="30" max="100"></progress>
事件参考:
<!-- 常用属性: 类名: class 唯一标示: id 行内样式: style 额外提示信息: title 是否可编辑: contenteditable = true/false 是否可拖拽: draggable = true/false 是否自动提示: autocomplete = on/off tab键次序: tabindex = number 私有数据: data-* --> <!-- window: onafterprint 文档打印之后运行的脚本 onbeforeprint 文档打印之前运行的脚本 onbeforeunload 文档卸载之前运行的脚本 onerror 在错误发生时运行的脚本 onhaschange 当文档已改变时运行的脚本 onload 页面结束加载之后触发 onmessage 在消息被触发时运行的脚本 onoffline 当文档离线时运行的脚本 ononline 当文档上线时运行的脚本 onpagehide 当窗口隐藏时运行的脚本 onpageshow 当窗口成为可见时运行的脚本 onpopstate 当窗口历史记录改变时运行的脚本 onredo 当文档执行撤销(redo)时运行的脚本 onresize 当浏览器窗口被调整大小时触发 onstorage 在 Web Storage 区域更新后运行的脚本 onundo 在文档执行 undo 时运行的脚本 onunload 一旦页面已下载时触发(或者浏览器窗口已被关闭) --> <!-- form: onblur 元素失去焦点时运行的脚本 onchange 在元素值被改变时运行的脚本 oncontextmenu 当上下文菜单被触发时运行的脚本 onfocus 当元素失去焦点时运行的脚本 onformchange 在表单改变时运行的脚本 onforminput 当表单获得用户输入时运行的脚本 oninput 当元素获得用户输入时运行的脚本 oninvalid 当元素无效时运行的脚本 onreset 当表单中的重置按钮被点击时触发。HTML5 中不支持 onselect 在元素中文本被选中后触发 onsubmit 在提交表单时触发 --> <!-- 键盘事件: onkeydown 在用户按下按键时触发 onkeypress 在用户敲击按钮时触发 onkeyup 当用户释放按键时触发 --> <!-- 鼠标事件: onclick 元素上发生鼠标点击时触发 ondblclick 元素上发生鼠标双击时触发 ondrag 元素被拖动时运行的脚本 ondragend 在拖动操作末端运行的脚本 ondragenter 当元素元素已被拖动到有效拖放区域时运行的脚本 ondragleave 当元素离开有效拖放目标时运行的脚本 ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本 ondragstart 在拖动操作开端运行的脚本 ondrop 当被拖元素正在被拖放时运行的脚本 onmousedown 当元素上按下鼠标按钮时触发 onmousemove 当鼠标指针移动到元素上时触发 onmouseout 当鼠标指针移出元素时触发 onmouseover 当鼠标指针移动到元素上时触发 onmouseup 当在元素上释放鼠标按钮时触发 onmousewheel 当鼠标滚轮正在被滚动时运行的脚本 onscroll 当元素滚动条被滚动时运行的脚本 --> <!-- 媒体事件: onabort 在退出时运行的脚本 oncanplay 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时) oncanplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本 ondurationchange 当媒介长度改变时运行的脚本 onemptied 当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时) onended 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息) onerror 当在文件加载期间发生错误时运行的脚本 onloadeddata 当媒介数据已加载时运行的脚本 onloadedmetadata 当元数据(比如分辨率和时长)被加载时运行的脚本 onloadstart 在文件开始加载且未实际加载任何数据前运行的脚本 onpause 当媒介被用户或程序暂停时运行的脚本 onplay 当媒介已就绪可以开始播放时运行的脚本 onplaying 当媒介已开始播放时运行的脚本 onprogress 当浏览器正在获取媒介数据时运行的脚本 onratechange 每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式) onreadystatechange 每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态) onseeked 当 seeking 属性设置为 false(指示定位已结束)时运行的脚本 onseeking 当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本 onstalled 在浏览器不论何种原因未能取回媒介数据时运行的脚本 onsuspend 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本 ontimeupdate 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本 onvolumechange 每当音量改变时(包括将音量设置为静音)时运行的脚本 onwaiting 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本 -->
时间: 2024-10-10 16:36:13