CSSでスパンの幅を設定する方法-CSSチュートリアル-php.cn

CSSでスパンの幅を設定する方法

青灯夜游

リリース： 2023-01-06 11:13:03

オリジナル

9887 人が閲覧しました

CSS でスパン幅を設定する方法: まず、「display:block;」または「display:inline-block;」スタイルを使用して、span 要素をブロック要素またはインラインブロック要素に設定します。 "width :Width value;" スタイルを使用して、スパンの幅を設定します。

CSSでスパンの幅を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

HTML では、span は次の特性を持つインライン要素です:

1. 他の要素と同じ行にあります;

2. 高さ、行の高さ、およびtop 下マージンと下マージンは変更できません;

3. 幅はそのテキストまたは画像の幅であり、変更できません。

スパンの幅と高さは一般に変更できないことがわかります。しかし、場合によってはスパン幅を設定する必要がある場合、どうすればよいでしょうか?

解決策:

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でスパンの幅を設定する方法

##説明:

1. ブロック要素

HTML では、

、

が Block 要素です。
display:block; を設定することで、インライン要素をブロック要素として表示できます。
構文:
```
span{display:block;}
```
ログイン後にコピー
ブロックレベル要素の特徴:
1. 各ブロック要素は新しい行で始まり、後続の要素も新しい行で始まります (
1 行のみ );
2.要素の高さ、幅、行の高さ、上下の余白を設定できます;
3.要素の幅要素が設定されていないこの場合、それ自体の親コンテナ (親要素と同じ幅) の 100% を占有します;
2. インラインブロック要素
Inline ブロック要素 ( inline-block ) は、インライン要素とブロック要素の両方の特性を備えており、コード
display:inline-block によって要素がインラインブロック要素に設定されます。
構文:
```
span{display:inline-block;}
```
ログイン後にコピー
インラインブロック要素の特徴:
1. 他の要素と同じ行に;
2. 要素の高さ、幅、行の高さ、上下の余白をすべて設定できます。
(学習ビデオ共有:
css ビデオチュートリアル)
以上がCSSでスパンの幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。