CSS 显示：内联与显示：块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3099030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display:inline vs display:block
提问by Nazmul
What is the basic difference between the following CSS:
以下 CSS 之间的基本区别是什么：
display:inline
and this:
和这个：
display:block
Using these separately on an element, I get the same result.
在一个元素上单独使用这些，我得到了相同的结果。
采纳答案by Pranay Rana
display: blockmeans that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: block表示元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空白，并且旁边没有 HTML 元素，除非另有顺序（例如，通过向另一个元素添加浮点声明）。
display: inlinemeans that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
display: inline表示元素内联显示，在同一行的当前块内。只有当它在两个块之间时，元素才会形成一个“匿名块”，但是它的宽度尽可能小。
Read more about display options : http://www.quirksmode.org/css/display.html
阅读有关显示选项的更多信息：http: //www.quirksmode.org/css/display.html
回答by Ravish
Block
堵塞
Takes up the full width available, with a new line before and after (display:block;)
占据可用的全宽，前后各换一行（display:block;）
Inline
排队
Takes up only as much width as it needs, and does not force new lines (display:inline;)
仅占用所需的宽度，并且不会强制换行（display:inline;）
回答by xj9
display: block- a line break before and after the element
display: block- 元素前后换行
display: inline- no line break before or after the element
display: inline- 元素前后没有换行符
回答by Niko Bellic
回答by Damien Wilson
display: block;creates a block-levelelement, whereas display: inline;creates an inline-levelelement. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flowof a document, whereas inline elements do not.
display: block;创建一个块级元素，而display: inline;创建一个内联级元素。如果您不熟悉 css 框模型，那么解释其中的区别有点困难，但可以说块级元素会破坏文档流，而内联元素不会。
Some examples of block level elements include: div, h1, p, and hrHTML tags.
块级元素的一些例子包括：div，h1，p，和hrHTML标签。
Some examples of inline level elements include: a, span, strong, em, b, and iHTML tags.
联级别元素的一些例子包括：a，span，strong，em，b，和iHTML标签。
Personally, I like to think of inline elements as typographicalelements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.
就个人而言，我喜欢将内联元素视为排版元素。这在技术上并不完全正确，但在大多数情况下，内联元素的行为与文本非常相似。
You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.
您可以在此处阅读有关该主题的更多文章。看到这个线程中的其他几个人引用了它，它可能值得一读。
回答by Aarthi
Display : blockwill take the whole line i.e without line break
显示：块将占用整行，即没有换行符
Display :inlinewill take only exact space that it requires.
Display :inline将只占用它需要的确切空间。
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
You can refer example in this fiddle http://jsfiddle.net/RJXZM/1/.
您可以参考这个小提琴http://jsfiddle.net/RJXZM/1/ 中的示例。
回答by Harshit
display:block
显示：块
takes the entire row(100%)of the screen ,it is always 100%of the screen size
占据屏幕的整行（100%），它始终是屏幕大小的 100%
display:inline-blocktakes up as much width as necessary ,it can be 1%-to 100% of the screen size
display:inline-block 根据需要占用尽可能多的宽度，可以是屏幕尺寸的 1% 到 100%
that's why we have div and span
这就是为什么我们有div 和 span
Div default styling is display block :it takes the entire width of the screen
Div 默认样式是显示块：它占据屏幕的整个宽度
span default styling is display:inline block :span does not start on a new line and only takes up as much width as necessary
span 默认样式是 display:inline block :span 不从新行开始，只占用必要的宽度
回答by James Curran
blockelements expand to fill their parent.
块元素扩展以填充其父元素。
inlineelements contract to be just big enough to hold their children.
内联元素收缩到刚好足以容纳他们的孩子。
回答by kunal
Display:block It very much behaves the same way as 'p' tags and it takes up the entire row and there can't be any element next to it until it's floated. Display:inline It's just uses as much space as required and allows other elements to be aligned alongside itself.
Display:block 它的行为方式与 'p' 标签非常相似，它占据了整行，并且在它浮动之前不能在它旁边有任何元素。Display:inline 它只是根据需要使用尽可能多的空间，并允许其他元素与自身对齐。
Use these properties in case of forms and you will get a better understanding.
在表单的情况下使用这些属性，您将获得更好的理解。
回答by Janick Bernet
Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.
为元素添加背景颜色，您将很好地看到内联与块的区别，正如其他海报所解释的那样。
