0

我有一个非常简单的带有 CSS 代码的 HTML，不明白为什么，css 规则不适用于 a 标签，但它适用于 p 标签。如果我将 a 标签包装在 ap 标签中，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>

4

5 回答 5

4

标签的盒子模型a不同于标签的盒子模型p。添加这一行：

div p, a {
    display: inline-block;

默认情况下，a标签具有display: inline盒子模型，因此您可以轻松地将它与常规文本放在同一行中（即在 a 内p）。p标签本身更像是一个实体，始终是文本的“块”或“框”，因此默认情况下p具有display: block;。

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

于 2013-08-05T05:35:23.203 回答
2

atag 是一个inline元素，并且p是块级元素，边距不适用于内联元素，因此您需要制作a标签、块或inline-block.

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

现在，在这里，再次取决于您希望您的a标签是什么，如果您希望多个a标签在您的内部排列，div您将不得不使用inline-block，如果您使用display: block;它将占用整个水平空间并在其下方呈现另一个元素。

举个例子，你有一个水平菜单，你排列你的元素，你可能会使用ul，li但是假设你div为每个菜单项，你可能需要display: inline-block;，这将具有块级元素的所有属性，但它会呈现它们inline 将其他空间留空以供其他元素占用，但是如果您想将每个元素呈现在彼此下方，则需要使用display: block;（不适用于div标签或p标签，默认情况下它们是块级元素，以更改其行为，你需要在你的CSS中提到这一点）

块级元素列表

内联元素列表

于 2013-08-05T05:37:58.920 回答
1

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

于 2013-08-05T05:35:56.927 回答
0

将此规则添加到 css -

display: block;
于 2013-08-05T05:36:01.180 回答
0

另一种解决方案通过以下方式替换您的代码“div p, a”

div p, div a { font-size: 24px; 行高：100px；显示：内联；}

请注意，我使用 line-height（与 box 高度相同）来使垂直居中对齐而不是 margin-top。但这不是多线的解决方案。

于 2013-08-05T06:09:09.607 回答