内联元素设置margin的反应

最新推荐文章于 2022-06-22 23:20:54 发布
最新推荐文章于 2022-06-22 23:20:54 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： 标签 html、css、javascript 前端 文章标签： 内联元素margin的反应 margin的细节 内联margin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen983234416/article/details/89189115
版权

此时的预定房间为span元素，这是为内联，所以此时的margin-bottom并没有反应

这个时候我们加上display：block 很明显我们的margin-bottom 有反应了

因此可以发现，我们内联元素对于设置上下的margin值没有反应，只有设置左右的margin才有反应

若要设置上下也有反应的话，大可以将内联转化为块状元素，就可以实现换行

 

chen983234416
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS如何设置高度为屏幕高度_css高频问题
weixin_39771351的博客
10-20 2403
1.居中内联元素居中(行元素)：.center-children { background-color: aqua; text-align: center; } class="center-children"> 内联元素(行元素)块级元素：//脱离了文档流所以是相对与浏览器窗口水平垂直居中1.脱离文档流的margin方法：(父元...
CSS day_05(6.16) 高度坍塌问题、元素定位、文本处理、CSS样式重置
m0_70328115的博客
06-20 293
高度坍塌问题、元素定位、文本处理、CSS样式重置
内联元素的margin属性
weixin_33922672的博客
09-23 169
inline属性的a标签，span标签支持margin-left与margin-right，margin-top无作用，而img标签margin四个方向都支持。 转载于:https://www.cnblogs.com/mabelstyle/archive/2012/09/23/2698914.html...
行内（又称为内联）元素的margin、padding属性值问题
程序员小周的博客
08-23 3568
内联元素可以直接设置margin.padding么？可以设置，不过margin、padding对内联元素不起作用而已。 也就是说，设了等于白设。这类元素一般是：a、span元素等。 不过，内联元素有几个比较特别的：（特别之处是：有块状元素的特性，但是又不换行）像img、object这一类的内联元素（行内替换元素），是可以设置margin、padding的，不过这两个元素要显示的内容是外部引用的资
行内元素的padding和margin是否无效
a5199421的博客
02-27 462
html中元素分为三种：块级元素、行内元素（也叫内联元素），内联块级元素。 常用块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 块级元素...
内联元素设置padding和margin
自我救赎
01-26 1420
内联元素无法设置宽高（img，input等替换元素除外），其大小取决于内容，被内容撑开。那么，padding和margin的设置对内联元素是否有效？ 首先来看一下内联元素设置padding是否有效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> spa
内联元素之padding和margin的表现
wujf1986630的专栏
07-28 955
无标题文档 a定义dispaly:block前 我们是羊1 female我们是羊2定义了margin值women 我们是羊3定义了padding值women 我们是羊4定义了宽高women
如何用CSS快速布局（一）—— 布局元素详细
隔壁家的老黄
01-22 387
要快速进行网页排版布局，则必须对布局的元素有清晰的了解，才不会总是在细节处出错。这一篇先详解有关布局的因素作为布局基础：块级元素and内联元素、盒模型、准确定位、元素对齐、样式继承。下一篇则重点描述快速布局思路。 一、什么是块级元素和内联元素 1，块级元素： display:block表现出来的特点是折行的， 一般来说可以包含块级元素和内联元素； 例外： 　　P 元素，只能包含内联元素，
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
weixin_39672443的博客
06-07 5789
目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...
整理大厂高频核心前端面试题，五万多字，面试必考
猫老板的豆
09-13 2471
如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
margin在块元素、内联元素中的区别 padding
weixin_30892987的博客
05-20 170
（1）margin在块元素、内联元素中的区别 HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中b...
QPrinter设置页面边距setPageMargins不生效问题
lizaijinsheng的专栏
05-07 1405
QPrinter设置页面边距setPageMargins不生效问题 在使用QPrinter绘制pdf文件过程中，尤其是在打印预览时，发现在电脑安装了打印机驱动时，页面(page)总是无法铺满纸张（paper)，周围留了50个像素的空白 采用：printer->setPageMargins(QMarginsF(0,0,0,0))仍然不起作用 后来研究发现，只要采用下面语句即可解决页面(pageSize)铺满纸张(paperSize) //设置铺满整个纸张，保证在不同设备上，尤其是有打印机驱动的电
内联元素的padding和margin
weixin_45270885的博客
04-27 883
内联元素的padding和margin能设置上吗？ ​ 这是我前段时间面试某中厂被问到的一道面试题，一开始有点懵，但照自己的理解是这样回答的：内联元素不能通过改变宽高来改变元素大小，只能通过内部撑开，padding设置不上，margin-left和right可以设置上，margin-top和bottom设置不上。 ​ 面试结束后，我感觉自己对这一部分的理解还是存在问题，就一些论坛和官网查了相关问题，结论如下： ​ 1.内联元素的pading-left和padding-right可以设置上，paddi
深入理解 padding
p1967914901的博客
06-22 4790
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 分别对应 CSS 中的 、、和 属性，本文我们的主角是 padding box。 指盒子的内补间。“补间”这个词比较术语化，我们不妨将其理解为快递盒子内快递商品外包裹的那层起保护作用的海绵。只是在 CSS 中，这个“海绵”默认是透明的。因为 CSS 中默认的 是 ，所以使用 会增加元素的尺寸。例如： 如果不考虑其他 CSS 干扰，此时 元素所占据的宽度就应该是 120 像素（80px
内联元素的padding，margin，border等不起作用的原因
不服输的小白
10-15 5222
内联元素的padding，margin，border等不起作用的原因
可以设置inline元素的padding和margin吗？
fydxx的博客
03-06 4019
对于这个问题，我的第一感觉就是不能，后来查看资料才知道原来我把inline元素设置了width和height无效和题目搞混了，经过查资料和实际验证后，得出以下结论：    1. inline元素设置width，height属性无效    2.inline元素的padding和margin可以设置，但是水平方向的padding-right，padding-left，margin-right，marg...
内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高...
weixin_34129696的博客
07-07 283
1，内联非替换元素设置宽高是无效的，设置margin时，左右有效，上下无效。设置padding时，左右有效，而上下padding比较奇葩，内联非替换元素的上下padding会在元素内容盒不动的情况下上下扩展(对比一下，块状元素设置margin或padding时，内容盒子会移动，内联元素设置左右margin和左右padding时，内容盒子也会移动)，设置背景色会看到效果，但是此元素下面的块状元素...
设置内联元素居中
最新发布
05-27
要设置内联元素居中，可以使用以下的 CSS 样式： ```css display: inline-block; text-align: center; ``` 其中，`display: inline-block;` 可以将元素转换为内联块级元素，使其具有块级元素的特性，同时又可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值