即使使用display inline-block，CSS中的填充也不起作用

在CSS中，使用display:inline-block属性可以将元素显示为内联块级元素，它具有内联元素的特点，同时又可以设置宽度、高度、边距等属性。然而，使用display:inline-block属性时，CSS中的填充（padding）属性可能不会起作用。

填充属性（padding）用于设置元素内容与元素边框之间的空间。当元素的display属性值为inline-block时，填充属性可能会被忽略或不起作用。这是因为内联元素的特性决定了它们不会独占一行，而是根据内容自动换行，因此填充属性对内联元素的影响有限。

解决这个问题的方法之一是将元素的display属性值设置为block，而不是inline-block。这样可以将元素显示为块级元素，填充属性就会起作用。另外，还可以使用其他布局方式，如flexbox或grid布局，来实现更灵活的布局，并能够正确应用填充属性。

腾讯云提供了一系列云计算相关的产品，其中与前端开发和CSS相关的产品包括腾讯云CDN（内容分发网络）和腾讯云Web应用防火墙（WAF）。CDN可以加速静态资源的传输，提高网页加载速度，而WAF可以保护网站免受恶意攻击。您可以通过以下链接了解更多关于腾讯云CDN和腾讯云WAF的信息：

腾讯云CDN产品介绍：https://cloud.tencent.com/product/cdn 腾讯云WAF产品介绍：https://cloud.tencent.com/product/waf

相关·内容

CSS中display:inline和display:inline-block的区别

2）不能设置宽高 3）允许其它元素在其左右 4）在这儿查看其它非常重要的旁注 block元素 1）inline元素能设置和不能设置的属性，block都能设置 2）在block元素后强制换行 inline-block...元素 1）允许其它元素在其左右 2）可以设置margin-top,padding-top,padding-bottom,margin-bottom 3）可以设置宽高 display:block, display...:inline, display:inline-block外观（如下图） ?...本文摘自stackoverflow中相关回答

1.4K2 0

如何用自己喜欢的 CSS 风格重置网站的样式

一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。在本文中，我会与你分享我自己的 CSS reset 项（除了 Normalize.css 之外我还使用它们）。...我将 reset 项分为8类：盒子大小删除边距和填充列表表格和按钮媒体元素表格隐藏属性 Noscript 调整盒子大小 box-sizing 属性改变了 CSS 盒子模型的工作方式。...我还将这些元素设置为 display: block ，因为 inline-block 在元素的底部创建了不需要的空格。...Normalize.css 已经为我们做了这件事。 1[hidden] { 2 display: none; 3} 这种风格的问题是它的特异性低。...我经常将 hidden 添加到用类设置的其他元素中。类的特异性高于属性，并且 display: none 属性不起作用。这就是为什么我选择用 !important 提高[hidden]的特异性。

1.4K3 0

利用属性选择器对外部链接进行样式设计

我们可以简单地使用属性选择器来实现外部链接的自定义样式。使用属性选择器 CSS 允许我们根据 HTML 元素的属性来设置样式，方法是将它们放在方括号中。...： /* 准确匹配 URL */ a[href='https://css-irl.info'] { } /* URL 中任何位置有 'css' */ a[href*='css'] { } /* 以...这里我们使用 content 属性和一个 base64 编码的 SVG，因为图标非常简单。但你也可以使用一个图像 URL、另一个字符或表情符号。我们可以添加一个小边距，使其稍微远离文本。...我们还需要将 display 属性设置为 inline-block。（注：我使用了自定义属性来简化图像 URL 的表示。）...: url(--var(svgUrl)); } 不幸的是，这个技巧在最新版本的 Chrome 中不起作用。

1121 0

【前端】CSS : display

： inline-block既具有block的宽高特性又具有inline的同行元素特性（CSS 2.1 新增） table ：作为块级表格来显示（类似table），表格前后带有换行符。...block 设置元素为块状元素如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。...inline-block inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增) 例： .display4 { display: inline-block...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。...结语在熟悉display的使用之后，日常的布局基本都能解决。（多数布局都可以通过flex解决）参考 CSS display 属性详解有错误之处，感谢指出，接收批评

1.8K1 0

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

网格中auto-fit和auto-fill之间的差异的误解在CSS grid中，repeat函数可以创建响应列布局，而不需要使用媒体查询。...使用 CSS grid 定义 main 和 aside 元素 CSS grid 常规布局中 main 和 aside 部分，为了让布局更加的完美，我们应该让 aside 高度等于 main 高度，即使...向 SVG 添加 fill 有时，在使用 SVG 时，如果在 SVG 中以内联方式添加了fill属性，填充就不会像预期的那样工作。...使用 display: inline-block 会出现怪异的空格为多个元素设置 display: inline-block或 display: inline，会在每个元素之间创建一个很小的空格。...在下面的示例中，每个项目的右侧都有8px的空间，但是由于使用display：inline-block导致增加了一个空格，最后结果是12px，这不是期望的结果。 ?

3.7K1 0

css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

二、vertical-align起作用的前提（display值对垂直对齐的影响）有时候设置vertical-align会发现根本不起作用，第一个原因：是因为vertical-align只能应用于inline...inline-block input（ie8+）、button（ie8+）（这俩元素在ie67中会被认为是inline水平） 3. table-cell td ?...display设置时：更改元素的显示水平也会让其支持vertical-align 三、更改元素的显示水平 1. display属性设置：非inline、inline-block、table-cell等...2. css声明 float会让元素变成block水平 position：absolute会让元素变成block水平，且脱离文档流四、vertical-align和line-height的关系...table-cell元素，单元格填充盒子相对于外边的表格行居中对齐字符有下沉特性 bottom：底线 inline/inline-block元素，元素底部和整行的底部对齐 table-cell

2K2 0

深入学习下 CSS 间距相关的知识

因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。现在，让我们开始吧。间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...填充不起作用 值得一提的是，垂直填充不适用于具有 display: inline 的元素，例如或。如果添加了填充，它不会影响元素并且填充将覆盖其他内联元素。...CSS： .element span { display: inline-block; padding-top: 1rem; padding-bottom: 1rem; } CSS 网格间隙....c-nav a { display: block; padding: 16px 8px; } 对于每个项目之间的间距，你可以使用边距或将的显示更改为 inline-block。...在使用 :not 选择器之前无法覆盖它。如果设计有多于一列，它将不起作用，见下图。关于解决方案 #2，它没有 CSS 特异性问题。但是，它仅适用于一个列堆栈。

13.4K4 0

全栈第一步-CSS基础前言CSS基础总结

CSS基础 CSS主要知识点集中于盒模型，布局，选择器等盒模型在对html标签有了整体认识之后，在了解了文档流的概念之后，就得了解元素在整个浏览器中的展现形式。CSS盒模型如下图所示： ?...在使用过程中为了统一认识，使用box-sizing:border-box比较好。上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。...常见的display属性有三种，block、inline、inline-block；区别如下：摘自网络 display:block block元素会独占一行，多个block元素会各自新起一行。...display:inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。...总结本文对近期的CSS学习做个总结，总结过程中发现自己对于position定位还不是特别清楚，后续使用过程中得继续体会，接下来准备学习下bootstrap和jquery。

5192 0

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

display: inline-block （文末送最新CSS3英文电子书）本篇文章阅读时间预计2分钟。...01 display: none vs visibility: hidden 如下段代码所示，我们有三个红、蓝、绿的方块： css部分 #box-1 { width: 100px; height...> 首先我们先使用 display: none 属性隐藏蓝色的方块，如下段代码所示： #box-2 { display: none; width...: 100px; height: 100px; background: blue; } 如图所示，使用display: none，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位...03 Display: Inline-block 某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征。

1.4K2 0

css display属性的值及用法_css clear作用

CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display...链接：http://www.css88.com/archives… display: block 设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准...·在box外面 display: inline-block inline-block为 CSS 2.1 新增的属性。...CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

2.4K1 0

HTML第三课——css盒子【2】

这就涉及到了元素的分类，所有元素可分为两类：块级元素即display的值默认为block的元素：div、p等。...特点是占用一行行内元素即display的值默认为inline的元素：span等。特点是只占自己需要的长度，设置宽和高都不起作用。我们来看一段代码： <!...我们只需要将display属性值设置为inline-block即可： /* px:意为像素; */ div{ width: 100px; height: 50px;.../imgs/pic.png");*/ border: 1px solid #0000ff; display: inline-block; } span{ width:.../imgs/pic.png");*/ border: 1px solid #0000ff; display: inline-block; } ?

1.3K14 0

但凡早知道这个插件，我也不至于加班到12点！

今天就把这个插件分享给大家 lime-painter lime-painter是一款 uniapp 海报画板，更优雅的海报生成方案，支持多种方式生成海报，同时也支持书写css 使用方式 lime-painter...; width: 120rpx; display: inline-block" > <l-painter-view css="background...#ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block" > 方式二：JSON 在 json 里有四种类型的组件可以用：type为 view、text、image、qrcode css 的 key 值使用小驼峰形式...做分享海报时经常会向海报里添加相关的图片，所以怎么让图片不变形，不被切割压缩，就尤为重要 lime-painter有个图片填充模式，就替我们考虑了这个问题图片填充模式：object-fit 名称含义

3472 0

CSS快速入门

CSS快速入门 CSS 用于控制网页的样式和布局。 CSS应用方式在标签上直接写style属性即可，例如：在HTML的head中书写style即可。...: inline-block; /*display的inline-block允许在元素上设置宽度和高度，并且去除了换行。...inline-block 行内块元素。（CSS2.1 新增的值）文字设置 CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。...也可以使用下面的方式指定某一个方向的内边距。...例如： .c1{ margin: 100px 100px 100px 100px; } 表示上下左右的外边距都是100px，也可以简写为margin: 100px；也可以使用下面的方式来设置某一个方向上的外边距

7523 0

css学习--css基础

2.元素分类在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素。...2.2内联元素在html中，span，a，label，strong，em就是内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display：inline将元素设置为内联元素。...2.3内联块状元素内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素（css2.1）img,input...inline-block元素特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可以设置； 3.盒子模型 3.1什么是盒子模型 css中，盒子模型是关于元素的宽高的。如下图： ?...css内定义的宽width和高height指的是填充padding以内的内容。

2.2K10 1

【3分钟前端早读课】如何理解CSS的Display的属性：None，Block，Inline和Block

: inline display: inline-block Display: None vs....id="box-3"> E0D0407855A1A91912EBD31163C5AF54.png 首先我们先使用 display: none 属性隐藏蓝色的方块，如下段代码所示： #box....png 如图所示，使用Display: None，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位。...首先我们下段没有CSS的Html代码: I'm a paragraph I'm a paragraph too I'm a word</...Display: Inline-block 某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征，我们可以这样理解

7880 0

元素居中的多种实现方式!

：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。...text-align，使子元素里的内容也水平居中 body{margin:20px;} .parent{ background...: red; text-align: center; } .child{ display: inline-block; background: blue...(height:该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。缺点:当文字内容的长度大于块的宽时，就有内容脱离了块。...center,也可以实现垂直居中设置display:flex;会使子元素充满父元素。

9652 0

CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

的ie模式 .inlineblock { display: inline-block;/* firefox等标准浏览器识别*/ *display: inline;/* 只有ie6和ie7...恰巧遇到群里一个同学说，float：left在ie8下不兼容，然后大家谈到用inline-block，我就来复习了下inline-block的兼容：于是顺便把最近的一个重点再在这里记载以下，以防以后走弯路吧...，把样式都格式掉了的感觉，多一句也没有害处，目前也没观察出多这几句的好处。...)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。.../www.jb51.net/css/493362.html 三、CSS hacker使用小结(兼容IE6、7、8)：http://www.jb51.net/css/493363.html 四、比较全的CSS

1.6K5 0

display属性，及其区别

/* Global values */ display: inherit; display: initial; display: unset; 主要的几个属性inline,block,inline-block...和margin-bottom无效，对padding值也一样 <!...设置了inline-block的元素虽然会有内联元素的效果，但是却可以设置宽高margin，padding值等其他 display：block的元素和块级元素并不是一个概念。...，多个块级元素则换行显示 display：inline-block的元素为什么可以设置宽高？...于是，值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成，值为inline的元素则内外均是“内联盒子”

1.3K1 0

CSS 伪类没有生效？探索 content 属性！

</span .desc { display: block; font-size: 30px; color: #000; } .desc:before { display: inline-block...问题的解决解决的方法很简单，设置 content 属性，而且要具有一定的宽高，可以设置 display 为 inline-block 和 block，让元素的宽高生效，如下，添加一行： .desc:...探索 content 属性来看 MDN 的描述： CSS 的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。...填充字符串我们经常需要在一些特殊的行后面加一些标识，比如品类列表，如果是新品则提示 New 字样。...CSS 计数器是网页范围变量，可以使用 CSS 规则更改其值。我们通过 Demo 来看看怎么处理的。

1.9K1 0

行内元素、块级元素和行内块级元素的区别和联系

行内元素：行内元素只占据它对应边框所包含的空间，行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用。...行内元素最常用的就是 span ， br 和 a ，之前 b ， i 和 small 标签也比较常见，分别用来设置加粗，斜体和缩小字体。但这种特殊的样式，最好还是用 CSS 来实现。... 定义列表中定义条目描述。定义列表。表单元素分组。表脚注。...当然，可以使用 CSS 的 display 属性给元素设置行内、块和行内块。.../*行内*/ display: inline; /*块*/ display: block; /*行内块*/ display: inline-block; 未经允许不得转载：w3h5-Web前端开发资源网

2873 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云