Question

我有一个非常简单的带CSS代码的HTML，不明白为什么，css规则不适用于a标签，但它适用于p标签。如果我将一个标签包装在一个p标签内，那么css就能正常工作，但我无法理解为什么它没有包装就行不通。

以下是完整示例http://jsfiddle.net/juaning/84Xn2/

css：div p, a { margin-top: 35px; font-size: 24px; }

html：<div class="family"> <a href="https://www.facebook.com/codecademy">Luigi</a> </div>

Answer 1

a标记的框模型与p标记的框模型不同。添加以下一行：

div p, a {
    display: inline-block;

默认情况下，a标记包含display: inline框模型，因此您可以轻松地将其放在与常规文本相同的行中（即在p内）。 p标记更多地是它自己的实体，始终是文本的“块”或“框”，因此p默认为display: block;。

小提琴：http://jsfiddle.net/ECAbd/1/

Answer 2

a标记是inline元素，p是块级元素，边距不适用于内联元素，因此您需要创建{{1} } tag，block或a。

inline-block

现在，在这里，再次取决于您希望div p, a { margin-top: 35px; font-size: 24px; display: block; }标记的内容，如果您希望在a内排列多个a标记，则必须使用div {1}}如果您使用inline-block，则会占用整个水平空间并在其下方呈现另一个元素。

例如，你有一个横向菜单，你排列你的元素，你可能会使用display: block;和ul但是假设你为每个菜单项取li，你可能需要div，这将具有块级元素的所有属性，但它会将它们内联呈现，而将其他空格留空以供其他元素占用，但如果要将每个元素渲染到彼此之下，则需要要使用display: inline-block;（不是display: block;标记或div标记，默认情况下它们是块级元素，为了改变它们的行为，你需要在CSS中提及

List of block level elements

List of inline elements

Answer 3

默认情况下，锚点有display: inline，而段落（如果我记得的话）display: inline-block。边距不适用于内联元素。您可以通过在CSS中明确设置display到inline-block来轻松解决此问题。

Answer 4

将此规则添加到css -

display: block;

Answer 5

另一个解决方案是通过以下

替换您的代码“div p，a”

div p，div a { font-size：24px; line-height：100px; 显示：内联; }

注意我使用了行高（与行高相同）来制作垂直对齐中心而不是margin-top。但这不是多线路的解决方案。

CSS：div p，不适用于标签

5 个答案: