gpt4 book ai didi

html - 为什么 margin-top 与 inline-block 一起工作而不与 inline 一起工作?

转载 作者:行者123 更新时间:2023-11-27 23:32:45 25 4
gpt4 key购买 nike

在下面的代码中,我试图让 h1 元素有一个上边距。当我在 css 中将位置设置为内联时,margin-top 没有显示。但是当我将它更改为内联 block 时,它确实如此。我想知道是否有人可以解释为什么会这样。谢谢。

编辑:这是 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;
}

最佳答案

Section 9.2.4 CSS2 规范声明:

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
This value causes an element to generate one or more inline boxes.

在 CSS2 规范 ( section 9.4.2 ) 中,我们被告知内联元素只考虑水平边距 ( 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.

inlineinline-block 的区别在于 inline 元素被视为内联,而 inline-block > 元素被有效地视为 block (它们在视觉上相互内联)。

block 级元素同时考虑水平和垂直边距,而内联级元素只考虑水平边距。

关于html - 为什么 margin-top 与 inline-block 一起工作而不与 inline 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57402242/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com