简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSSのpadding属性には負の値を指定できますか? CSSのpadding属性について詳しく解説

寻∝梦
リリース： 2019-05-22 09:20:20
オリジナル
19512 人が閲覧しました

CSS ボックス モデルのパディング padding 属性 の詳細な紹介。初心者がよく犯す間違いですが、padding 属性は実際には負の値を書き込む可能性があります。答えは記事の最後にあります。今すぐこの記事を見てみましょう

CSSのpadding属性には負の値を指定できますか? CSSのpadding属性について詳しく解説

まず最初の質問を紹介します:

cssのpadding属性は負であってもよいでしょうか?答えは簡単です。最初は説明しません。padding 属性の負の値の使用については、記事の最後に説明があります。

CSS でのパディング属性の使用法を見てみましょう:

padding: 1 つのステートメントですべてのパディング属性 (自動/長さの長さの値/%) を設定する短縮属性

  • padding-top: 定義上のパディング

  • padding-right: 右のパディングを定義します

  • padding-bottom: 下のパディングを定義します

  • padding-left: 左のパディングを定義します

これはパディングの入門です。詳細については、例を見てみましょう: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table{padding-top:20px;padding-right:50px;padding-bottom:100px;padding-left:20px;border:double;}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td>123</td><td>456</td></tr>
<tr><td>789</td><td>987</td></tr>
</table>
</body>
</html>
ログイン後にコピー

上記のコードは 4 つの属性をすべて記述していますが、コードの表示効果を確認する必要があります。ブラウザ内:

CSSのpadding属性には負の値を指定できますか? CSSのpadding属性について詳しく解説

(さらに CSS スタイルを見たい場合は、PHP 中国語 Web サイト css ユーザーマニュアル コラムスタディにアクセスすることをお勧めします)

効果は非常に明白ですか?このコードの説明:

  • padding-top:20px: 上部のパディングを 20 ピクセルに定義します。

  • padding-right:50px: 右側のパディングを 50 ピクセルに定義します。

  • padding-bottom:100px: 下部のパディングを 100 ピクセルに定義します。

  • padding-left:20px: 上部と同じ幅かどうかに関係なく、左のパディングを 20 ピクセルとして定義します。

  • border:double: 境界線を二重実線として定義します。

そうは言っても、負の値を書き込むとどうなるか見てみましょう。 

<style type="text/css">
table{padding-top:20px;padding-right:50px;padding-bottom:-300px;padding-left:20px;border:double;}
</style>
ログイン後にコピー

少し誇張して、マイナス 300 の値を設定して、その効果を見てみましょう:

CSSのpadding属性には負の値を指定できますか? CSSのpadding属性について詳しく解説

テストした結果、効果はほとんど存在しないことがわかりました。のpadding-bottom属性をキャンセルするのと同じです。

このことから、CSS のパディングに負の値を含めることはできないことがわかります。そうする場合、その属性をキャンセルすることと同じです。

上記は CSS スタイルでのパディングの使用法に関する記事です。さらに詳しく知りたい場合は、PHP 中国語 Web サイトの css Learning Manual コラムを参照してください。質問がある学生は以下から質問してください。

【編集者のおすすめ】

HTMLのタグをマウスホバーで色を変える方法、CSSコントロールのタグのマウスホバースタイルを詳しく解説

CSSテーブルに枠線スタイルを追加するにはどうすればよいですか？ CSS テーブルの境界線スタイルの概要 (完全な例付き)

以上がCSSのpadding属性には負の値を指定できますか? CSSのpadding属性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css padding パディング
ソース：php.cn
前の記事：CSSボックスモデルの枠線の使い方をご存知ですか？ CSSボックスモデルの構成を紹介します。 次の記事：CSSで丸い枠線を設定するにはどうすればよいですか? CSS（画像とテキスト）で丸い枠線を設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
アンカーポイント内の画像に対して境界線の半径が機能しない 次の HTML コードを使用しています: <aclass="-video-detail-qualifiers-branding"><imgsr...
から 2024-04-06 17:20:25
0
1
347
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
PHPで座標が境界オブジェクト内にあるかどうかを確認するにはどうすればよいですか? いくつかの座標があり、それらの座標が Google マップの境界 (北東と南西) 内に正確にあるかどうかを確認したいと考えています。例:AvailableLat:40.712776...
から 2024-04-05 00:25:54
0
1
1401
DDD の集約間の「ユーザー」エンティティの管理 DDD とヘキサゴナル アーキテクチャを使用して、モノリシック アプリケーションをモジュラー モノリシック アプリケーションに書き直そうとしています。まず、「Shared」、「Us...
から 2024-04-04 09:54:15
0
1
361
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！