CSS min-width屬性用法及代碼示例

它用於設置元素內容框的最小寬度。這意味著內容框的寬度可以大於 min-width 值，但不能更短。它設置元素寬度的下限。

當內容小於最小寬度時應用；否則，如果內容較大，則此屬性無效。該屬性確保CSS width 屬性的值不能小於min-width 屬性的值。它不允許負值。

用法

min-width:none | length | initial | inherit;

此 CSS 屬性的值定義如下：

none:它是不限製內容框寬度的默認值。

length:該值定義了 min-width 的長度，單位為 px、cm、pt 等。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

現在，讓我們看一個使用此 CSS 屬性的示例。

示例

在這個例子中，有四個帶有內容的段落元素。我們使用 min-width 屬性的長度值定義這些段落的 minimum-width。第一段最小寬度425px，第二段22em，第三段220pt，第四段最小寬度設置為initial。

<!DOCTYPE html>
<html>
<head>
<title>
min-width property
</title>

<style>
p{
border:4px solid blue;
background-color:lightblue;
display:inline-block;
}
#px {
min-width:425px;
}
#em {
min-width:22em;
}
#pt {
min-width:220pt;
}
#cm {
min-width:initial; 
}
</style>
</head>
<body>
<h3> min-width:425px; </h3>
<p id = "px">
Hi, Welcome to the javaTpoint.com. 
</p>
<h3> min-width:22em; </h3>
<p id = "em">
Hi, Welcome to the javaTpoint.com.
</p>
<h3> min-width:220pt; </h3>
<p id = "pt">
Hi, Welcome to the javaTpoint.com.
</p>
<h3> min-width:initial; </h3>
<p id = "cm">
Hi, Welcome to the javaTpoint.com. 
</p>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS min-width property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。