如何在 CSS 中使文字方塊完美契合其容器？

控制容器內的文字方塊寬度

在網頁設計中，通常希望文字方塊跨越容器的整個寬度。但是，當使用 CSS 將文字方塊的寬度設為 100% 時，會出現一個常見問題。由於預設的邊距、邊框和填充，這可能會導致文字方塊擴展到其容器之外。

要克服這個挑戰，可以利用 CSS3 屬性 box-sizing: border-box。此屬性重新定義了「寬度」的概念，以包括外部填充和邊框。

<code class="css">input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}</code>

這種現代方法提供了對文字框寬度的精確控制，確保它們緊貼在容器內。

另外，對於 CSS3 支援有限的瀏覽器，可以手動調整封閉元素的 padding-right 屬性。這涉及到估計邊框和填充所佔用的額外空間（以像素為單位）。例如，在 Internet Explorer 8 以下版本中，此調整通常涉及新增 6px 的填入。

透過利用這些技術，網頁設計者可以有效控製文字方塊的寬度，使它們能夠填充容器而不會溢出.

以上是如何在 CSS 中使文字方塊完美契合其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！