html - 明确与隐含段落的奇怪之处-6ren

html - 明确与隐含段落的奇怪之处

转载作者：太空宇宙更新时间：2023-11-03 18:07:45

25

4

我正在尝试使用 HTML 和 CSS 看看我是否可以制作一个 LaTeX Logo ，该 Logo 可以与其余文本(不是图像)一起缩放和着色。我可以用内联 block 来做到这一点 <div> 如果它没有包含在一个段落中。如果我添加 和 标签，它打破了。带有显式段落标记的段落和没有显式段落标记的段落有什么区别？这会被某些 HTML 文档类型修复吗？

<!doctype html>
<html>
<head>
<title>Test logos</title>
</head>
<body style="font: 12px Arial,sans-serif;">
1. div inline-block, works fine<br>
So as a helpful reminder, I thought I would gather some helpful information here to
help both veterans of these forums and new users lean how best to use these forums.
Where are the forum rules?
<div style="display: inline-block; position: relative;
 border: 1px solid blue; /* just for debug */
     font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
  <div style="left: 0em; bottom: -0.6ex; position: absolute;">L</div>
  <div style="left: 0.7em; bottom: 0.3ex; position: absolute; font-size: 50%;     
        font-weight: bold;">A</div>
  <div style="left: 0.6em; bottom: -0.6ex; position: absolute;">&Tau;</div>
  <div style="left: 1.35em; bottom: -1.25ex; position: absolute; font-size: 80%; 
        font-weight: 600;">&Epsilon;</div>
  <div style="left: 1.63em; bottom: -0.6ex; position: absolute; ">&Chi;</div>
</div>
rules!
You can find the forum rules via this thread:
Helping Each Other and Keeping Posts Respectful.
<hr>
<p>
2. p div inline-block, div OK, but /p inserted before it, so line break and gap 
        before div<br>
So as a helpful reminder, ...
<div style="display: inline-block; position: relative;
 border: 1px solid blue; 
font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</div>
rules!...
</p>
<hr>
3. span inline-block, works fine<br>
So as a helpful reminder, ...
<span style="display: inline-block; position: relative;
border: 1px solid blue; 
    font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
<hr>
<p>
4. p span inline-block, block empty, /span and /p inserted after span<br>
So as a helpful reminder, ...
<span style="display: inline-block; position: relative;
 border: 1px solid blue; 
    font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
</p>
<hr>
5. span block, block OK, but has line breaks before and after<br>
So as a helpful reminder, ...
<span style="display: block; position: relative;
 border: 1px solid blue; 
font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
<hr>
<p>
    6. p span block, block empty, /span /p inserted, divs elsewhere, break 
    before/after block<br>
So as a helpful reminder, ...
<span style="display: block; position: relative;
 border: 1px solid blue; 
font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
</p>
</body>
</html>

第一种和第三种情况(没有  标签)似乎工作正常。第三个在跨度内有 div，但似乎接受它。第四种和第六种情况(  block 或内联 block ，带  )得到 和 自动插入，因此 span 内容为空白，div 漂浮在其他地方。第二种情况与第一种情况相同，除了 。 , 和一个 在 LaTeX Logo block 之前自动插入(连同边距)。第五个案例类似于第三个案例，除了它是一个 block 而不是一个内联 block (都是跨度)并且在 Logo block 之前和之后插入了中断。

FF30(我的主要平台)、Chrome 和 IE11 的行为方式几乎相同。简而言之，为什么添加段落标签会带来如此大的行为变化？它似乎不仅仅是一个带有顶部和底部边距的简单 block 元素!

最佳答案

主要是，您遇到的事实是 <div>  内不允许使用标签标签。并且  中应该只有内联元素标签。不同的浏览器可能会将此解释为您要放置 并为您插入各种标签。另外，当它是 display:block 时，它将占用包含元素的宽度，在本例中为 <body> ，这就是为什么会有看起来像换行符的原因。

查看规范，Grouping Elements和 Lines and Paragraphs .(以下是这些部分的引述。)

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

和

 <!ELEMENT SPAN - - (%inline;)*

关于html - 明确与隐含段落的奇怪之处，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24377975/

25

4

0

文章推荐： javascript - 使用 Javascript 的响应式菜单，问题

明确 Windows 中的权限
我在 linux 上工作。我对windows没有太多想法。 windows中文件的权限是如何组织的？我们在unix中是否有像chmod这样的api来更改权限？最佳答案对于 Windows，有一个名
api - 明确 API 的含义
应用程序编程接口(interface) (API) 是一组用于访问基于 Web 的软件应用程序的编程指令和标准。如果出现，有人可以向我解释一下吗？谷歌地图或优酷这是API哪个是softwar
android - 如何使隐含的 Intent 明确？
我有两个应用程序，A 和 B，它们使用 android 库 C。B 有一个服务 A 想通过 C 使用，例如在我的库中有一个类试图将它绑定(bind)到服务，
java - 明确 Intent 操作默认值
我正在正常或安全模式下启动相机应用程序，具体取决于使用我的应用程序执行的手势，但一旦用户选择应用程序并点击始终，则没有选项可以更改默认值，即使是从 Android 的设置菜单中也是如此. camera
python:我可以在不(明确)使用整数索引的情况下获得稀疏矩阵表示吗？
我有一个数据集，本质上是一个稀疏二进制矩阵，表示两个集合的元素之间的关系。例如，让第一组是人(用他们的名字表示)，例如像这样的东西: people = set(['john','jane','mike
让你的python代码更加pythonic(简练、明确、优雅)
何为pythonic? pythonic如果翻译成中文的话就是很python。很+名词结构的用法在中国不少，比如：很娘，很国足，很CCTV等等。我的理解为，很+名词表达了一种特殊和强调的意味。
prolog - 明确 Prolog 目标的 "deterministic success"
某些 Prolog 目标的确定性成功问题已经一次又一次地出现在 - 至少 - 以下问题: Reification of term equality/inequality Intersection an
c# - DateTime.TryParse 可以(明确)识别哪些格式？
我指的是 DateTime.TryParse(string s, out DateTime result) 重载，它尝试从字符串中解析 DateTime - 没有特定的格式正在指定。我可以从http
《数据资产》专题：《数据资产、数据权属、数据产权》如何估值、明确、保护？
2020 年 04 月 10 日，《中共中央国务院关于构建更加完善的要素市场化配置体制机制的意见》正式公布，将数据确立为五大生产要素（土地、资本、劳动力以及技术）之
ios - 明确 NSNotification 的 addObserver 函数中 notificationSender 的用途
有人可以解释一下 NSNotification 的 addObserver 函数中 notificationSender 的用途吗？这是 Apple 文档的解释: notificationSende

首页

博学

6Ren·AI

商城

html - 明确与隐含段落的奇怪之处