![block而不是inline]( "block而不是inline")
本文介绍了为什么margin-top使用inline-block而不是inline？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 在下面的代码中，我试图让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>这里是CSSbody { 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 此值使元素生成一个或多个行内框。inline This value causes an element to generate one or more inline boxes. （第9.4.2节），我们得知内联元素只遵守水平边距（证明）：Further on in the CSS2 specification (section 9.4.2) we get told that inline elements only respect horizontal margins (proof): 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-12 02:49