Question

我正在玩HTML和CSS，看看我是否可以制作一个LaTeX徽标，该徽标可以与文本的其余部分（不是图像）进行缩放和着色。我可以使用内联块<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，但似乎接受它。第四和第六种情况（阻止或内联阻止，）会自动插入和，因此范围内容为空白且div为漂浮在其他地方。第二种情况与第一种情况相同，除了，并且会在LaTeX徽标块之前自动插入（连同边距）。第五种情况与第三种情况类似，只是它是一个块而不是内联块（两个跨度），并且在徽标块之前和之后插入了中断。

FF30（我的主要平台），Chrome和IE11都表现得非常相似。简而言之，为什么添加段落标记会导致更多行为改变？它似乎不仅仅是一个具有顶部和底部边距的简单块元素！

Answer 1

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

查看规范Grouping Elements和Lines and Paragraphs。（以下是这些部分的引用。）

P元素代表一个段落。它不能包含块级元素（包括P本身）。

和

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

Answer 2

段落类型：

物理与概念
显式vs隐式
演绎，归纳混合

描述性摘要
翔实的摘要
描述性和信息性的组合

明确与隐含段落的奇怪性

2 个答案: