インライン要素のpadding-top属性-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

インライン要素のpadding-top属性

巴扎黑

Jun 28, 2017 pm 02:30 PM

要素属性

この質問の理由は、少し前の面接中に、面接官がインライン要素でのマージンとパディングの使用の効果について質問したのですが、あまり答えられなかったようです。たまたま過去 2 日間にこの問題を調べるためにいくつかのデモを作成する時間がありましたが、いくつかの落とし穴を発見しました。

まずデモに行きます:

スタイルシート

<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	.inline{
		border: 1px solid red;
		padding: 20px;
	}
</style>

htmlコード1:

<body>
    <span class="inline">span</span>
    <span class="inline">span</span>
    <span class="inline">span</span>
</body>

htmlコード2

<body>
	<input type="text" class="inline" value="input" />
	<input type="text" class="inline" value="input" />
        <input type="text" class="inline" value="input" />
</body>

同じスタイルシートを使用して上記の2つのコードを実行してください。問題が見つかりました:span の padding-top が設定されているのに、ブラウザに表示されません。span と input の両方が inline 要素であるのはなぜですか?

2. w3c ドキュメントを取得します http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties

'padding-top'、

padding-right

'、

padding-bottom

'、

'padding-left'Value:

| 継承 table-row-group、table-header-group、table-footer-group、table-row、table-column を除くすべての要素-group および table-columnメディア: 計算値:margin-topのspanは無効ですが、margin-topの設定では入力は全くOKですか？なぜ？ドキュメントを参照してください

	初期: 0
適用対象:
継承:	no
パーセンテージ: 含まれるブロックの幅を参照
ビジュアル
指定されたパーセンテージまたは絶対長
パディングはすべての要素に適用されます。	これら 2 つの要素に margin-top を設定すると、2 つのパフォーマンスはまったく異なります。

'margin-top'、

margin-bottom

Value: & lt;余白幅>
|継承

0適用対象:含まれるブロックの幅を参照ビジュアル指定されたパーセンテージまたは絶対的な長さ

これらのプロパティは、非置換インライン要素には影響しません。

那么これは何かですか？

先書き: 10.6.1 インラインの非置換要素

'height'

プロパティは適用されません。コンテンツ領域の高さはフォントに基づく必要がありますが、この仕様ではその方法は指定されていません。 UA は、たとえば、em-box やフォントの最大のアセンダとディセンダを使用する場合があります。 (後者では、em ボックスの上または下の部分を持つグリフがコンテンツ領域内に確実に収まりますが、フォントごとに異なるサイズのボックスが生成されます。前者では、作成者が「行の高さ」に関連して背景のスタイルを制御できることが保証されます。ただし、グリフがコンテンツ領域の外にペイントされることになります。)

注: CSS のレベル 3 には、コンテンツの高さに使用されるフォントの尺度を選択するプロパティが含まれる可能性があります。

インラインの非置換ボックスはコンテンツ領域の上部と下部から始まり、'line-height'

とは関係がありません。ただし、行ボックス

の高さを計算するときに使用されるのは、

「line-height」

だけです。複数のフォントが使用されている場合（これは、グリフが異なるフォントで見つかった場合に発生する可能性があります）、コンテンツ領域の高さこの仕様では定義されていません。ただし、コンテンツ領域が、(1) em ボックス、または (2) 要素内のすべてのフォントの最大アセンダーとディセンダーのいずれかにちょうど十分な高さになるように高さを選択することをお勧めします。フォントのベースライン配置に応じて、これは関連するどのフォントサイズよりも大きくなる可能性があることに注意してください。 10.3.2 インライン、置換された要素

「margin-left」の「auto」の計算値 または

'margin-right'

は、使用されている値「0」になります。

'height'

と 'width' の両方が 'auto' の計算値を持ち、要素に固有の幅がある場合の場合、

intrinsic

幅は'width'の使用値です。'height'と'width'の両方に'auto'の計算値があり、要素にintrinsic幅がない場合、ただし、

本質的な

高さと本質的な比率があります。または、'width' に 'auto' の計算値があり、'height' に他の計算値があり、要素に固有の比率がある場合。 'width'の使用値は次のとおりです:(使用された高さ) * (固有比率)「height」と'width'の両方が「auto」の計算値を持ち、要素に固有の比率はあるが、固有の高さや幅がない場合、使用される「幅」の値は CSS 2.1 では定義されていません。ただし、含まれるブロックの幅自体が置換された要素の幅に依存しない場合、使用される「幅」の値は、通常のフローでブロックレベルの非置換要素に使用される制約式から計算されることが示唆されています。

それ以外の場合、
'width'
の計算値が「auto」で、要素に固有の幅がある場合、その固有の幅は

'width'

の使用値になります。それ以外の場合、

'width 「

の計算値は「auto」ですが、上記の条件がいずれも満たされない場合、「width」の使用値は 300px になります。 300 ピクセルがデバイスに適合するには広すぎる場合、UA は、代わりに 2:1 の比率を持ち、デバイスに適合する最大の長方形の幅を使用する必要があります。、または非常に高い。

概要:

input、margin、paddingなどの置換要素が全方向に動作する場合、

span、aなどの置き換え不可能な要素の場合、

padding-left、padding-right両方とも効果がありますが、padding-top は効果がありません。

コメントで @meta-D が指摘したように、padding-bottom は無効であり、境界線のスタイルにのみ影響することが後に検証されました。写真についてはコメントをご覧ください。

margin-rightとmargin-leftは効果がありますが、margin-topとmargin-bottomは効果がありません。

アップデート 4.16:

最近、CSS の権威あるガイドを読んでいたとき、その本にはこう書かれていました: 非置換要素のパディング、ボーダー、マージンは、インライン要素とその生成されたボックスに垂直方向の影響を与えません。、インラインボックスの高さには影響しません。（まだまだ本を読まないといけません）

いつも記事が中途半端な気がするので、とりあえず下のリンクを見ていただいて、さらに深掘りしていきます。

関連リンク (高い壁を超えるには階段が必要):

http://maxdesign.com.au/news/inline/

http://stackoverflow.com/questions/12468176/what-is- a- non-replaced-inline-element

http://melon.github.io/blog/2015/03/07/inline-replaced-vs-inline-nonreplaced/

http://reference.sitepoint.com /css /replaceelements

初期値:
table-caption、table、inline-table 以外の表表示タイプを持つ要素を除くすべての要素
継承: no	パーセンテージ:
	メディア:
	計算値:

以上がインライン要素のpadding-top属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

如何在Python中获取整数字面量属性而不是SyntaxError？Aug 20, 2023 pm 07:13 PM

TogetintliteralattributeinsteadofSyntaxError,useaspaceorparenthesis.TheintliteralisapartifNumericLiteralsinPython.NumericLiteralsalsoincludesthefollowingfourdifferentnumericaltypes−int(signedintegers)−Theyareoftencalledjustintegersorints,arepositiveo

如何在Java中使用Gson重命名JSON的属性？Aug 27, 2023 pm 02:01 PM

Gson@SerializedName注释可以序列化为JSON，并将提供的名称值作为其字段名称。此注释可以覆盖任何FieldNamingPolicy，包括可能已在Gson实例上设置的默认字段命名策略。可以使用GsonBuilder类设置不同的命名策略。语法@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedName示例importcom.google.gson.annotations.*;

Python的dir()函数：查看对象的属性和方法Nov 18, 2023 pm 01:45 PM

Python的dir()函数：查看对象的属性和方法，需要具体代码示例摘要：Python是一种强大而灵活的编程语言，其内置函数和工具为开发人员提供了许多方便的功能。其中一个非常有用的函数是dir()函数，它允许我们查看一个对象的属性和方法。本文将介绍dir()函数的用法，并通过具体的代码示例来演示其功能和用途。正文：Python的dir()函数是一个内置函数，

Win11磁盘属性未知怎么办Jul 03, 2023 pm 04:17 PM

　　Win11磁盘属性未知怎么办？近期Win11用户在电脑的使用中，发现系统出现提示磁盘错误的情况，这是怎么回事儿呢？而且应该如何解决呢？很多小伙伴不知道怎么详细操作，小编下面整理了Win11磁盘出错的解决步骤，如果你感兴趣的话，跟着小编一起往下看看吧！　　Win11磁盘出错的解决步骤　　1、首先，按键盘上的Win+E组合键，或点击任务栏上的文件资源管理器；　　2、文件资源管理器的右侧边栏，找到边右键点击本地磁盘（C：），在打开的菜单项中，选择属性；　　3、本地磁盘（C：）属性窗口，切换到工具选

使用Vue.set函数实现动态添加属性的方法和示例Jul 24, 2023 pm 07:22 PM

使用Vue.set函数实现动态添加属性的方法和示例在Vue中，如果我们想要动态地添加一个属性到一个已经存在的对象上，通常会使用Vue.set函数来实现。Vue.set函数是Vue.js提供的一个全局方法，它能够在添加属性时保证响应式更新。本文将介绍Vue.set的使用方法，并提供一个具体的示例。首先，在Vue中，我们通常会使用data选项来声明响应式的数据。

pageXOffset属性在JavaScript中的作用是什么？Sep 16, 2023 am 09:17 AM

如果您想获取文档从窗口左上角滚动到的像素，请使用pageXoffset和pageYoffset属性。对水平像素使用pageXoffset。示例您可以尝试运行以下代码来了解如何在JavaScript中使用pageXOffset属性-现场演示<!DOCTYPEhtml><html>  <head>   <style>  &

position有哪些属性Oct 10, 2023 am 11:18 AM

position属性取值有static、relative、absolute、fixed和sticky等。详细介绍：1、static是position属性的默认值，表示元素按照正常的文档流进行布局，不进行特殊的定位，元素的位置由其在HTML文档中的先后顺序决定，无法通过top、right、bottom和left属性进行调整；2、relative是相对定位等等。

如何在一个声明中设置不同的背景属性？Sep 15, 2023 am 09:45 AM

CSS（层叠样式表）是设计网站视觉外观的强大工具，包括背景属性。使用CSS，可以轻松自定义网页的背景属性，创造独特的设计，提升用户体验。使用一个声明是设置各种背景属性的高效方式，对于网页开发人员来说，这有助于节省时间并保持代码简洁。理解背景属性在一个声明中设置多个背景属性之前，我们需要了解CSS中可用的不同背景属性并了解每个属性的工作原理。以下是每个属性的简要概述。背景颜色−此属性允许设置元素的背景颜色。Background-image-此属性允许设置元素的背景图像。使用图像URL、线性渐变或径

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、