Question

我正在学习CSS并且正在努力理解为什么html会这样呈现：

http://jsfiddle.net/46nVs/

我能理解为什么红色边框从顶部和左侧被切断。这是因为轮廓不会占用空间，因为它们是在框外绘制的：https://developer.mozilla.org/en/CSS/outline。在这个例子中，它们被绘制在<body>元素之外。

然而，我很困惑为什么边界被切断了最佳。有什么想法吗？
什么css可以应用于<span>元素来制作整个大纲和边框显示？
此外，是否可以将内联元素放在旁边像<span>somestuff</span><div>somecontent</div>？

Answer 1

由于<span>是内联元素，

边框（以及填充，因此）被切断。

任何block级元素（或具有display: inline-block的任何元素）都遵循不同的规则（例如，可以设置宽度），其中一条规则说“块元素从一开始就定位边框，内联是从内容开始的位置“。

快速编辑：你已经改变了你的问题，Sagar已经很好地回答了它的其他部分，我不打扰：）

Answer 2

第1点：

如果您添加float:left或display:block，则该框将正确呈现。这是因为span是一个内联元素。

第2点：

添加以下内容：

margin:10px 0 0 10px;
float:left;

第3点： 您可以根据设计要求在块元素旁边放置一个内联元素。您还可以通过设置display:block或display:inline-block或允许的任何其他显示值来更改内联元素的显示样式。

Answer 3

除了其他人的评论之外，这里要记住的事情是不要使用span，除非你想做颜色或字体更改（通过应用一个类），例如：

<div class="post">
  <div class="post_information">
    <span class="date">11/1/2012</span>
    <span class="author">Mr. Smith</span>
  </div>
  <p>Lorem ipsum</p>
</div>

.date {font-weight:bold;}
.author {color:#ff0000;}

如果您想要“盒子”行为，请改用div或p。覆盖span的默认行为以使其显示为块，尽管技术上可行，但可能意味着您使用了错误的元素，或者您的HTML不够语义。（span没有语义值）

在这个例子中如何呈现轮廓，边框和填充的技术说明？

3 个答案: