CSS中的div標籤和圍繞div的內聯邊框的問題

Question

這是我第一次使用CSS內聯樣式的HTML。基本上我試圖使用一個內聯樣式的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的簡寫，瀏覽器會爲你選擇不指定屬性的默認值。在這種情況下，medium爲border-width和currentColor爲border-color。如果這是你的計劃，那好吧。但是，如果您事先不知道多麼厚的medium邊框，您應該自己提供一個寬度。
見MDN。

對於雙邊框，3倍的倍數效果最好，因爲這是您最低限度需要的（每行1px和1px之間）。對於其他寬度，不同的瀏覽器可能會以不同的方式劃分寬度，這樣在某些瀏覽器中可能會變得更粗，更少。

編輯：
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/>