Do you really understand HTML? _html/css_WEB-ITnose

Many websites set {margin:0; padding:0;} for divs, right? Demo click here - -

心里怀着这样的疑问，抱着试一试的态度，我们去看看常用的标签那些有默认的margin/padding？

FF 32.0:

==== Margin ==== h1,21.4333px,0px,21.4333px,0pxh2,19.9167px,0px,19.9167px,0pxh3,18.7167px,0px,18.7167px,0pxh4,21.2833px,0px,21.2833px,0pxh5,22.1833px,0px,22.1833px,0pxh6,24.9667px,0px,24.9667px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,16px,0px,16px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxtextarea,1px,0px,1px,0pxtextarea,1px,0px,1px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.6px,10px,12px,10pxlegend,0px,2px,0px,2pxinput,2px,2px,2px,2pxselect,1px,1px,1px,1pxoption,0px,5px,0px,3pxoption,0px,5px,0px,3pxtextarea,2px,2px,2px,2pxbutton,0px,6px,0px,6pxselect,1px,1px,1px,1pxoption,0px,0px,0px,20pxoption,0px,0px,0px,20pxtextarea,2px,2px,2px,2px

Chrome 36.0:

==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0pxh2,19.920000076293945px,0px,19.920000076293945px,0pxh3,18.719999313354492px,0px,18.719999313354492px,0pxh4,21.280000686645508px,0px,21.280000686645508px,0pxh5,22.17759895324707px,0px,22.17759895324707px,0pxh6,27.959999084472656px,0px,27.959999084472656px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.599999904632568px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

IE 10:

==== Margin ==== h1,21.44px,0px,21.44px,0pxh2,19.92px,0px,19.92px,0pxh3,18.73px,0px,18.73px,0pxh4,21.28px,0px,21.28px,0pxh5,22.15px,0px,22.15px,0pxh6,25px,0px,25px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13.33px,0px,13.33px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,2px,2px,3px,2pxlegend,0px,2px,0px,2pxinput,2px,1px,2px,1pxtextarea,2px,2px,2px,2pxbutton,3px,10px,3px,10pxtextarea,2px,2px,2px,2px

IE 9:

==== Margin ==== h1,21.44px,0px,21.44px,0pxh2,19.92px,0px,19.92px,0pxh3,18.73px,0px,18.73px,0pxh4,21.28px,0px,21.28px,0pxh5,22.15px,0px,22.15px,0pxh6,25px,0px,25px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13.33px,0px,13.33px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,2px,2px,3px,2pxlegend,0px,2px,0px,2pxinput,2px,1px,2px,1pxtextarea,2px,2px,2px,2pxbutton,3px,10px,3px,10pxtextarea,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

Sogou:

==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0pxh2,19.920000076293945px,0px,19.920000076293945px,0pxh3,18.719999313354492px,0px,18.719999313354492px,0pxh4,21.280000686645508px,0px,21.280000686645508px,0pxh5,22.17759895324707px,0px,22.17759895324707px,0pxh6,27.959999084472656px,0px,27.959999084472656px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.599999904632568px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

360 Security:

==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0pxh2,19.920000076293945px,0px,19.920000076293945px,0pxh3,18.719999313354492px,0px,18.719999313354492px,0pxh4,21.280000686645508px,0px,21.280000686645508px,0pxh5,22.17759895324707px,0px,22.17759895324707px,0pxh6,27.959999084472656px,0px,27.959999084472656px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.599999904632568px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

Opera 24.0:

==== Margin ==== h1,21.4400005340576px,0px,21.4400005340576px,0pxh2,19.9200000762939px,0px,19.9200000762939px,0pxh3,18.7199993133545px,0px,18.7199993133545px,0pxh4,21.2800006866455px,0px,21.2800006866455px,0pxh5,22.1775989532471px,0px,22.1775989532471px,0pxh6,27.9599990844727px,0px,27.9599990844727px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.59999990463257px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

Safari 5.17:

==== Margin ==== h1,21px,0px,21px,0pxh2,19px,0px,19px,0pxh3,18px,0px,18px,0pxh4,21px,0px,21px,0pxh5,22px,0px,22px,0pxh6,24px,0px,24px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxselect,2px,21px,2px,4pxtextarea,2px,2px,2px,2px

Common block elements and features:

<!-- 块元素：独占一行，宽(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 class="brush:php;toolbar:false">预格式文本

标题

表单标题：

文档作者或拥有者的联系信息

块引用

Commonly used inline elements and characteristics:

<!-- 内联元素：不独占一行，宽、高、行高、竖向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>

Commonly used inline block elements and characteristics:

<!-- 内联块元素：不独占一行，宽、高、行高、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> 

Event reference:

<!-- 常用属性：类名：                    class唯一标示：                id行内样式：                style额外提示信息：            title是否可编辑：                contenteditable = true/false是否可拖拽：                draggable = true/false是否自动提示：            autocomplete = on/offtab键次序：                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                  当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本-->