html标题标记的默认边距是什么(<h1>,<h2>,<h3>等)?

Mr.*_*T.K 10 html css

我避免使用以下重置代码的默认值:

margin:0px; and padding:0px;
Run Code Online (Sandbox Code Playgroud)

例如,下面标题标签的默认边距是多少?

<h1>Header</h1>
Run Code Online (Sandbox Code Playgroud)

dar*_*rma 8

关于哪个浏览器是不同的,因此如果你想要一个像素完美的设计,那么练习是将这些值"重置"为0(边距和填充)并自己设置它们.

"CSS reset"对于前端开发人员来说非常普遍,这是我使用的简单示例:

html,body,blockquote,code,h1,h2,h3,h4,h5,h6,p,pre{margin:0;padding:0}
button,fieldset,form,input,legend,textarea,select{margin:0;padding:0}
fieldset{border:0}
a,a *{cursor:pointer}
div{margin:0;padding:0;background-color:transparent;text-align:left}
hr,img{border:0}
applet,iframe,object{border:0;margin:0;padding:0}
button,input[type=button],input[type=image],input[type=reset],input[type=submit],label{cursor:pointer;}
ul,li{list-style:none;margin:0;padding:0;}
strong{font-weight:bold;}
em{font-style:italic;} 
Run Code Online (Sandbox Code Playgroud)

  • 这是不好的做法.多年来,CSS重置已经发生了变化,任何声称发布最终CSS重置的博主都将......只需要发布另一个终极CSS重置;)当浏览器或命名空间发生变化时.此外,像这样的CSS重置会改变页面上几乎每个元素的所需属性.这很重要. (4认同)

Mad*_*iha 7

你的问题:

它因浏览器而异.检查每个浏览器的特定默认样式表.

例如,谷歌Chrome浏览器就是这样0.67em.


更好的解决方案?

请注意,如果您希望实现x-browser一致性,则必须使用CSS重置.

最常见的是:

* { padding: 0; margin: 0; }
Run Code Online (Sandbox Code Playgroud)

虽然存在其他(可能更好).

  • 不要使用“*”解决方案。这是不好的做法并且存在性能问题。 (2认同)

Mar*_*and 6

CSS 规范有一个信息丰富的附录 D. HTML 4 的默认样式表。

虽然信息量很大,但它仍然说:

鼓励开发人员在其实现中将其用作默认样式表。

在那里你可以找到

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
Run Code Online (Sandbox Code Playgroud)