为什么margin-top使用inline-block而不是inline？ [英] Why does margin-top work with inline-block but not with inline?
问题描述
在下面的代码中，我试图让h1元素有一个顶部边距。当我在css中将位置设置为内联时，margin-top不显示。但是当我把它改为inline-block，它就是。我想知道是否有人可以解释为什么会是这样。谢谢。
In the code below, I am trying to get the h1 element to have a top-margin. When I set the position to inline in the css, the margin-top doesn't show up. But when I change it to inline-block, it does. I am wondering if somebody can explain why this is the case. Thanks.
编辑：以下是jsfiddle中的代码： http://jsfiddle.net/ pjPdE /
Here's the code in jsfiddle: http://jsfiddle.net/pjPdE/
这是我的HTML：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="MyFirstWebsite.css">
<title>
Max Pleaner's First Website
</title>
</head>
<body>
<h1>Welcome to my site.</h1>
</body>
</html>
这里是CSS
body {
background-image:url('sharks.jpg');
}
h1 {
background-color:#1C0245;
display:inline;
padding: 6.5px 7.6px;
margin-left:100px;
margin-top:25px;
}
推荐答案
第9.2.4节的CSS2规范说明：
Section 9.2.4 of the CSS2 specification states:
inline-block
此值会导致元素生成内嵌级块容器。 inline-block的内部被格式化为块框，并且元素本身被格式化为原子行内框。
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
此值使元素生成一个或多个行内框。
inline
This value causes an element to generate one or more inline boxes.
（第9.4.2节），我们得知内联元素只遵守水平边距（< a href =http://jsfiddle.net/JamesD/nRmq2/>证明）：
Further on in the CSS2 specification (section 9.4.2) we get told that inline elements only respect horizontal margins (proof):
在内联格式化上下文，框是从包含块的顶部开始，一个接一个地水平布局的。
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
inline 之间的区别$ c>和 inline-block 是 inline 元素被视为内联而 inline-块元素被有效地视为块（它们在视觉上相互并排）。
The difference between inline and inline-block is that inline elements are treated as inline whereas inline-block elements are effectively treated as blocks (which are visually inline with each other).
块级元素尊重水平和垂直边距，内联级元素只遵守水平边距。
Block-level elements respect both horizontal and vertical margins whereas inline-level elements only respect horizontal margins.
这篇关于为什么margin-top使用inline-block而不是inline？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
