首頁 >web前端 >css教學 >css怎麼設定span的寬度

css怎麼設定span的寬度

青灯夜游原創: 2021-05-13 17:16:189885瀏覽

css設定span寬度的方法：首先使用「display:block;」或「display:inline-block;」樣式將span元素設定為塊狀元素或內聯塊狀元素；然後使用「width :寬度值;”樣式設定span的寬度。

css怎麼設定span的寬度

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在HTML中，span是個內聯元素，特徵如下：

1、和其他元素都在一行上；

2、高度、行高和頂以及底邊距都不可改變；

3、寬度就是它的文字或圖片的寬度，不可改變。

可以看出，span的寬度和高度一般是不可改變。但有時又需要設定span的寬度，這樣怎麼辦？

解決方法：

使用display屬性將span元素設定為區塊狀元素或內聯塊狀元素；然後使用width屬性設定寬度。

範例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			.inline{
				width: 150px;
				background-color: palevioletred;
			}
			.block{
				display: block;
				width: 150px;
				background-color: palevioletred;
			}
			.inline-block{
				display: inline-block;
				width: 150px;
				background-color: palevioletred;
			}

		</style>
	</head>

	<body>
		<div>测试文本，<span class="inline">测试文本</span>，<span class="block">测试文本</span>，<span class="inline-block">测试文本</span></div>
	</body>

</html>

效果圖：

css怎麼設定span的寬度

#說明：

##1、塊狀元素

在html中

、

就是塊狀元素。內聯元素可以透過設定display:block;
顯示為塊狀元素。

語法：
```
span{display:block;}
```
區塊級元素的特徵：1、每個區塊狀元素都從新的一行開始，並且其後的元素也另起一行（
獨佔一行
）；2、元素的高度、寬度、行高以及頂和底邊距都可設定；

3、元素寬度在不設定的情況下，佔它本身父容器的100%（和父元素寬度一致）；

#2、內聯塊狀元素
##內聯塊狀元素（ inline-block）就是同時具備內嵌元素、塊狀元素的特點，程式碼
display:inline-block
就是將元素設定為內聯塊狀元素。
語法：
```
span{display:inline-block;}
```
內嵌塊狀元素特徵：######1、和其他元素都在一行上；######2、元素的高度、寬度、行高以及頂和底邊距都可設定。 ######（學習影片分享：###css影片教學###）###

以上是css怎麼設定span的寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼去掉下劃線樣式下一篇：css怎麼去掉下劃線樣式

看更多