向我的HTML div添加邊框轉移我的文本

Question

我最近學習了一些html/css，並開始自己做一個小項目。我遇到了一個問題。我爲div添加了一個1px純黑色邊框，它將我的文本從我的div背景中移開。我該如何解決？

Answer 1

嘗試添加屬性到div：

box-sizing: border-box; 

的默認值是box-sizingcontent-box，這意味着width和height是唯一的東西在限定的高度和寬度的佔。

相反，border-box使得它使得width，height，padding，並border都在指定的寬度和高度範圍內。

例如，在與一個box-sizing: content-box; height: 400px; width: 400px<div>，所述內容（即，文本）。將400像素400像素。添加border或padding會將內容推過來（如同您的情況）並使整個框變寬。另一方面，如果將其更改爲具有相同寬度和高度的box-sizing，則400px將佔所有這些大小屬性（margin除外）。