技術說明如何在此示例中呈現輪廓，邊框和填充？

我正在學習CSS和奮力明白爲什麼HTML是渲染，像這樣：技術說明如何在此示例中呈現輪廓，邊框和填充？

http://jsfiddle.net/46nVs/

我可以理解爲什麼在紅色邊框被從頂部切斷離開了。這是因爲輪廓不會佔用空間，因爲它們是在框外繪製的：https://developer.mozilla.org/en/CSS/outline。在這個例子中，它們被繪製在<body>元素之外。

但是我很困惑，爲什麼邊界從頂部被切斷。有任何想法嗎？
什麼css可以應用於<span>元素，以使整個輪廓和邊框顯示？
此外，是否有人認爲可以放置一個嵌入式元素旁邊的塊元素像<span>somestuff</span><div>somecontent</div>？

來源

2012-02-08 user784637

點1：

如果添加float:left或一個display:block，該框將正確渲染。這是因爲span是一個內聯元素。

點2：

添加以下內容：

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

3點： 您可以按照設計需要一個內聯元素放在旁邊的一個塊元素。您還可以通過設置display:block或display:inline-block或允許的任何其他顯示值來更改內聯元素的顯示樣式。

來源

2012-02-08 12:45:47

謝謝，我真的很感激。我認爲你不應該使用內聯元素的邊距> – user784637 2012-02-08 13:22:31

在這種情況下，元素是浮動的，所以它遵循「浮動」規則，因此邊距工作。 – 2012-02-08 18:32:10

由於<span>是內聯元素，所以邊界（和填充，就此而言）被切斷。

任何block級別的元素（或任何與display: inline-block）受制於不同的規則（例如可以有寬度設置），其中一個規則說：「塊元素從邊界開始定位，內聯從位置內容的開始「。

快速編輯：你已經改變了你的問題，並薩加爾已經回答了它的其他部分不夠好，我不打擾:)

來源

2012-02-08 12:42:09 Joe

是的，我加了一些東西，我upvoted你，雖然 – user784637 2012-02-08 13:22:56

乾杯:)讚賞。 – Joe 2012-02-08 13:24:30

我可以找到那些位置概念？ – 2014-10-11 02:50:04

除了別人的評論，這裏要記住的事情是除非你想要做的顏色或字體的變化（通過應用類）使用範圍的，例如：如果你想

<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或ap代替。重寫span的默認行爲以使其顯示爲block，雖然技術上可行，但可能意味着您使用了錯誤的元素或者您的HTML語義不夠。（跨度沒有語義價值）

來源

2012-02-08 12:58:07

技術說明如何在此示例中呈現輪廓，邊框和填充？

回答

相關問題