margin padding 上下边框对内联元素span无效

已于 2022-05-07 17:10:46 修改
阅读量142 收藏
点赞数
分类专栏： # 前端bug解决 文章标签： 前端
于 2022-05-07 17:05:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shiny0815/article/details/124634900
版权

<span> 和<code> 内联元素
设置上下边框如 margin-top margin-bottom padding-top padding-bottom，无效。
设置左右 margin-right margin-left padding-right padding-left，有效。
设置 display: inline-block 可以使上下边框生效

Shiny0815
关注
专栏目录
CSS 盒模型、块状元素与内联元素、CSS选择器
09-25
- **内联元素**：不会独占一行，不能直接设置宽高，常见的内联元素包括`<span>`、`<a>`、`<img>`等。 **转换元素类型**：可以使用`display`属性来改变元素的默认显示行为。例如，可以将内联元素变为块状元素，或将...
内联元素设置padding和margin的有效性
m0_65251054的博客
03-25 239
内联元素无法设置宽高（img，input等替换元素除外），其大小取决于内容，被内容撑开。 padding和margin的设置对内联元素的有效性 结论：内联元素水平方向上的内边距(padding-left, padding-right)可以正常设置，垂直方向上的内边距从视觉效果上来说是可以设置的，但不会影响到整体布局。 内联元素外边距margin水平方向上设置有效，垂直方向上无效。 ...
深入理解DIV和SPAN的区别
12-13
由于`span`是内联元素，因此不能直接设置`width`和`height`，但是可以设置`margin`和`padding`，但这些属性只会影响垂直方向，而不会改变元素在行内的位置。`span`中的对象会紧密排列在一行内，直到行结束才会换行。...
css中padding、margin两个重要属性的详细介绍及举例说明
01-05
- **内联元素(Inline Element)**：内联元素不会自动换行，通常与其他元素并排显示，例如`<span>`、`<a>`等。 - **行内块元素(Inline-Block Element)**：具有块级元素和内联元素的特点，可以在同一行显示多个元素，...
HTML&CSS; 12.zip
09-29
每个元素都可以看作是一个矩形的盒子，包括内容区（content）、内边距（padding）、边框（border）和外边距（margin）。在"HTML&CSS 12"中，你可能会遇到如何设置这些属性的实例，以精确控制元素的大小和位置。 在...
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 131
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 473
使用filterable。
基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）
2302_79553009的博客
10-29 1390
本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 643
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
前端 常见开发工具使用
weixin_45534301的博客
10-31 389
【代码】前端 常见开发工具使用。
CSS3新增盒子属性（三）
。
10-28 1036
介绍CSS3新增盒子属性。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 249
Google Recaptcha V2 简单使用
vue父子通讯
Jsjendndn的博客
10-28 303
下面是子组件子组件使用Props发送。
监听el-table中 自定义封装的某个组件的值发现改变调用函数
只会写bug
11-01 179
当你在一个el-table创建自定义组件：首先创建一个自定义的 Vue 组件，这个组件将会嵌入到el-table的单元格中。在自定义组件中暴露事件：自定义组件应当暴露一个事件，用于通知父组件（通常是el-table的模板所在组件）组件内的值发生了变化。监听事件并在父组件中处理：在父组件中监听这个事件，并在事件触发时执行相应的函数。 通知父组件值已经改变。
.NET Core WebApi第4讲：控制器、路由
weixin_54966200的博客
10-28 643
在API里面，我们把每一个方法叫做action请求行为，把方法叫做行为（行为的英文是action）。为什么能把方法叫行为？——之前学类的时候，人吃喝拉撒睡、 跑步都是你这个人的一个行为。
Vue学习笔记(十五)
最新发布
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
11-01 693
reactive+ref的创建与对比+toRefs+toRef+computed+watch的5种类型监视
尚硅谷react教程_扩展_setState更新状态的2种写法
呵呵哒!的博客
10-28 315
2.callback是可选的回调函数，它在状态更新完毕、界面也更新后（render调用后）才被调用。（1）.setState(stateChange,[callback])----对象式的setState。3.callback是可选的回调函数，它在状态更新，界面也更新后（render调用后）才被调用。（2）.setState(updater,[callback])----函数式的setState。1.对象式的setState是函数式的setState的简写方式（语法糖）// 函数式的setState。
【Web.路由】——路由约束
weixin_42031602的博客
10-28 219
一个介绍路由约束的文章（asp.net core)
理解与应用：块级元素div与内联元素span的区别
CSS在网页设计中扮演着关键角色，它允许设计师通过层叠规则来控制元素的样式，如字体(font)、行高(line-height)、颜色(color)、外边距(margin)、内边距(padding)、边框(border)、文本对齐(text-align)、背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值