是否有任何HTML元素作为典型的内联块存在？ [英] Is there any HTML element that exists as the quintessential inline-block?

问题描述

div 是典型的块级元素，而 span 是内联的对应元素。它们是该显示类型的最简单形式，没有其他属性。在很多情况下，我会给他们任何一个风格：

  display：inline-block; 
  

这使得它们表现得非常方便。对于 div 来说，它意味着可以轻松地坐在彼此旁边的盒子，同时保持其定义的宽度和高度。对于 span 我可以使用它来制作多彩的矩形。 inline-block 显示对很多事物都很棒，但我从来没有见过以 inline-block



图片（ img ）是，但它们显然不适合相同事情是一个 div ，他们有这种风格，但他们履行了一个不同的目的。



那么是否有一个元素我不知道这是典型的 inline-block ，还是这个被遗漏了？

和如果不是，为什么？ inline-block 的用法很多，所以看起来应该有一些元素采用这种基本形式。

inline-block

在当代网页设计中有几种用途。但它不是原始设计，它只包含块和内联元素。相反，它来源于NSCA Mosaic添加的< img> 。 （它使用错误的标记并帮助击败原始响应式设计，我想我们刚刚开始修复img问题 ）。

在时间轴之后， inline-block 仍然不是IE4或5的一部分，或者任何Netscape的版本。这不是早期HTML4时代的一部分。所以我们不希望在该版本的标准中找到你的假设元素。 inline-block 只出现在CSS2中，它出现在 HTML4 。 （看每个标准的参考部分）。

不像 block ， inline- block 受标记中的空白影响。它的名字暗示了这一点，这正是您在某些文本（也就是字处理为字处理程序对象锚定为字符）过程中期望< img> 的期望。但除了它的起源之外，依赖于空白的标记很快变得非常麻烦。我不希望W3C的HTML5将它放在一个新的元素中。

指定它肯定会涉及关于语义，内容和表示分离等问题的争论。以及什么叫它:)。如果默认渲染使得空白显着 - 这不是该元素的语义的一部分吗？考虑使用图像来表示单词 - 或单词的单个字母（使用适当的替代文字）。这表明围绕这个元素存在空白（或不存在）在语义上是重要的，就像在白色空间中分隔符的存在在语义上是显着的一样。这对我来说似乎是一个很大的问题。

inline-block code> float 无处不在。但都不是真正适合的。这就是为什么CSS3将标准化新的布局模式：flexbox和grid，以支持具有真正清洁标记的现代响应设计。没有虚拟标记（或虚拟生成的内容）。没有黑客对空白的依赖。

The div is the quintessential block level element, and the span is the inline counterpart. They are the simplest possible form of that display type, with no other properties. In a great many cases I will give either of them the style:

display: inline-block;

This makes them behave in a very handy way. For div it means boxes that will easily sit next to each-other, while maintaining their width and height as defined. For the span I can use this to make colorful rectangles. The inline-block display is great for so many things, but I have never seen an element that starts as an inline-block without anything else going on.

Images (img) are, but they are obviously not suited for the same things as a div, they have that style, but they fulfill a different purpose.

So is there an element that I don't know of that is the quintessential inline-block, or is this left out?

And if not, why? The uses of inline-block are numerous, so it seems like there should be some element that takes that basic form.

解决方案

There's no such element, and there are some good reasons why not.

inline-block has several uses in contemporary web design. However it is not part of the original design, which only includes block and inline elements. Instead it derives from <img> as added by NSCA Mosaic. (Which uses the wrong markup and helped defeat the original "responsive design". I think we've only just started to fix the problems with img).

Further down the timeline, inline-block still wasn't part of IE4 or 5, or any version of Netscape. It wasn't part of the early HTML4 era. So we wouldn't expect to find your hypothetical element in that version of the standard. inline-block only appears in CSS2, which came after HTML4. (Look at the reference section in each standard).

Unlike block, inline-block is affected by whitespace in the markup. It's implied by the name, and it's what you'd expect from looking at <img> in the middle of some text (aka wordprocessor object anchored "as character"). But beyond its origins there, the whitespace-dependent markup soon becomes very troublesome. I wouldn't expect W3C HTML5 to enshrine this in a new element.

Specifying it would certainly involve argument about "semantics", separation of content and presentation etc. (As well as what to call it :). And if the default rendering makes whitespace significant - is that not part of the semantics of that element? Consider using images to represent words - or individual letters of a word (with appropriate alt text). This illustrates that the presence of whitespace (or not) around this element would be semantically significant, just like the presenceofwhitespaceseparatingwordsissemanticallysignificant. That seems like a big problem to me.

inline-block is often promoted as a modern alternative to using float everywhere. But neither is genuinely suitable. This is why CSS3 will standardize new layout modes: "flexbox" and "grid", to support modern responsive designs with genuine, clean markup. No dummy markup (or dummy generated content). No hacking around whitespace-dependence.

这篇关于是否有任何HTML元素作为典型的内联块存在？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！