內嵌元素的padding-top屬性-css教學-PHP中文網

首頁

web前端

css教學

內嵌元素的padding-top屬性

巴扎黑

Jun 28, 2017 pm 02:30 PM

元素屬性

產生這個問題的原因是前一段時間面試的時候，面試官問我margin和padding在內聯元素上的使用效果，好像沒怎麼答上來。這兩天正好有空寫幾個demo看看這個問題，發現了幾個坑。

先上demo：

樣式表

<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>

請大家分別用同樣的樣式表執行上面兩段程式碼，會發現一個問題：span的padding－top雖然設定了，但是在瀏覽器中並沒有展現出來，wtf !

那麼問題來了，有人說行內元素不能設置padding－top，但是

1 . span和input 都為行內元素，為什麼對input設定的padding-top值有效呢？

2. 祭出w3c文檔 http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties

'padding -top', 'padding-right', 'padding-bottom', 'padding-left'

0all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column -group and table-columnInherited:no

Value:	\| inherit
Initial:


##Applies to:

# #Percentages:

refer to width of containing block

Media: visual#Media:

#the percentage as specified or the absolute length## padding適用於全部元素。 'margin-top', # 0

#Computed value:

當為這兩個元素設定margin－top時，兩者的表現又完全不同。 span對於margin－top無效，而input對於margin－top的設定是完全OK的？為什麼？看文檔
'margin-bottom'
	Value:
\| inherit
Initial:

# ##Applies to:### ############all elements except elements with table display types other than table-caption, table and inline-table############ #######Inherited:### ######no################Percentages:### #######refer to width of containing block###############Media:### #######visual##############Computed value:### # #####the percentage as specified or the absolute length############

這些屬性對非替換的內聯元素沒有影響#.

那麼這是為什麼呢？ span是

行內不可替換元素

，而input是行內替換元素，第一次聽說，哭瞎。 # 10.6.1 內聯、非替換元素

'height'

屬性不適用。內容區域的高度應基於字體，但本規範並未指定如何。例如，UA 可以使用 em-box 或字體的最大上升部分和下降部分。（後者將確保部分位於 em-box 上方或下方的字形仍然落在內容區域內，但會導致不同字體的框大小不同；前者將確保作者可以控制相對於“行高”的背景樣式，但會導致字形在其內容區域之外繪製。替換框的垂直內邊距、邊框和邊距從內容區域的頂部和底部開始，與

'line-height'

無關。但在計算行框高度時僅使用

'line-height'

。情況）不同的字體），內容區域的高度不在本規範中定義。但是，我們建議選擇高度，使得內容區域的高度足以容納 (1) em-box，或 (2) all 中的字體的最大上升部分和下降部分。請注意，這可能大於所涉及的任何字體大小，具體取決於字體的基線對齊方式。

'margin-left'

或

'margin-right'

的'auto' 值變成使用值'0'。 ## 和 'width' 都具有「auto」的計算值，且該元素也具有intrinsic 寬度，則使用該intrinsic 寬度

' width'

的值。 #intrinsic 寬度，但有intrinsic

高度和

intrinsic

比率；或如果

'width'

的計算值為 'auto'，

'height' 具有其他計算值，且該元素確實具有內在比率；則'width'

的使用值為：

#(使用的高度) * (內在比率)#如果'height' 和'width' 兩者都有'auto'的計算值，且元素有固有的比例，但沒有固有的高度或寬度，那麼使用的'width'值在CSS 2.1中是未定義的。但是，建議如果包含區塊的寬度本身不取決於被取代元素的寬度，則使用的「寬度」值是根據用於正常流中區塊級非替換元素的約束方程式計算的。，如果'width' 的計算值為“auto”，且該元素具有固有寬度，則該固有寬度是'width' 的使用值

#否則，如果'width' 的計算值為“auto”，但以上條件都不滿足，則使用'width 的值' 變為 300 像素。如果 300px 太寬而無法適應設備，則 UA 應使用具有 2:1 比例且適合設備的最大矩形的寬度。或寬高比的。

總結：

對於input這種替換元素，margin和padding各方向均有作用，

對於span ，a等這些不可替換元素，

　　padding-left,padding-right均有效果,padding-top無效果。

　　經評論中@meta-D的提醒，後經驗證，padding－bottom無效，只是對border的樣式產生了影響。配圖請看評論。

　　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/replacedelements

##########

以上是內嵌元素的padding-top屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡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