CSS中的div標簽和div周圍的內嵌邊框問題

Question

這是我第一次將HTML與CSS內聯樣式一起使用。 基本上，我試圖使用帶有內聯樣式的div標簽，以使其具有雙線邊框和一半的字母寬度填充偏移文本。

我想也許我應該使用內聯樣式規則和雙邊框開始div標簽。 例如：

<div>
<div style=border:double;padding:0em,3px></div>

那是正確的方法嗎？

Answer 1

您可以使用<hr>創建水平線並設置其樣式以使其成為雙線。

hr {
    padding: 0em 3px;
    border: none;
    border-top: double #000;
    color: #000;
}

Answer 2

如果您想使用內聯，請像這樣使用

<div style="border:4px double black;width:200px;height:200px;"></div>

Answer 3

首先，應始終在屬性值兩邊加上引號。 沒有理由不這樣做。 （最初，引號在簡單的值（例如height=30周圍是可省略的，絕不能在包含冒號，分號和大於號和其他東西的短語周圍加引號。）

此外，您在填充中有一個錯誤：填充之間沒有用逗號分隔。

然后，如果您使用border符號，這是border-width ， border-style和border-color的簡寫，瀏覽器將為未指定的屬性選擇默認值。 在這種情況下， border-width為medium ， border-color為currentColor 。 如果那是您計划的，那么好。 但是，如果您事先不知道medium邊框的確切厚度，則應該自己提供一個寬度。
見MDN 。

對於雙邊框，最好使用3像素的倍數，因為這是您的最低要求（每行1像素，中間1像素）。 對於其他寬度，不同的瀏覽器可能會對寬度進行不同的划分，因此，在某些瀏覽器上，您可能會比其他瀏覽器獲得更粗的線條和更少的空間。

編輯：
WRT評論，如果您希望div占據窗口的右半部分，則可以執行以下操作。 使用auto的左邊距和0的右邊距，div將被刷新到右邊。
請注意，我還對.5ch的填充使用了“字母寬度的一半”，這比3px硬編碼更好。

 .styled { border:3px double; width:50%; padding:.5ch 0; margin:0 0 1em auto; } 

 <div class="styled"></div> <hr/> 

或者，如果更希望使用浮點數：

 .styled { border:3px double; width:50%; float:right; padding:.5ch 0; margin-bottom:1em; } .styled + * { clear:right; } 

 <div class="styled"></div> <hr/>