css避免padding属性影响元素宽度,造成溢出换行

最近在写Time for插件缩略图排列的时候,由于padding属性总是影响盒子大小,导致默认写好的参数在不同宽度场景下存在溢出换行的情况,或者是填不满盒子。

如图

%title插图%num

 

解决办法

在要控制元素排列的外层标签上添加 box-sizing: border-box;属性,进而不让padding影响盒子大小。

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

默认值: content-box
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxSizing=”border-box”

%title插图%num

文章最后更新于 2021-08-30

给TA买糖
共{{data.count}}人
人已赞赏
文档笔记随笔

Chrome 谷歌浏览器开启 密码导入

2021-7-5 10:00:54

其他分享

Time for WordPress 时光相册插件1.9.14 支持图集/分类/评论

2021-9-14 22:00:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧