ホームページ > 記事 > ウェブフロントエンド > CSSでスパンの幅を設定する方法

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

青灯夜游オリジナル: 2021-05-13 17:16:189807ブラウズ

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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSの下線スタイルを削除する方法次の記事：CSSの下線スタイルを削除する方法

続きを見る