行内元素与行内块元素的margin-top问题

最新推荐文章于 2023-10-22 04:01:52 发布
最新推荐文章于 2023-10-22 04:01:52 发布
阅读量1.7k 收藏
点赞数 1
文章标签： css html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50659023/article/details/110387991
版权

行内元素与行内块元素的margin-top问题

对行内元素设置margin-top（bottom）不起作用，margin-right（left）起作用，行内块元素可以设置宽高，设置margin属性也起作用。如果要设置行内元素需转换为行内块元素

行内元素转换为行内块元素：

display:inline-block;

行内元素及行内块元素请看前文笔记：
行内块元素及其特点
块级元素及特点
行内元素及其特点

一坨烤冷面
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
行内元素、块元素都有哪些
09-22
行内元素只占内容的宽度，块元素不管内容多少都要占全行，下面为大家介绍下常见的行内元素及块元素有哪些，感兴趣的朋友可以参考下，希望对大家有所帮助
HTML5+CSS3学习笔记（七）行内元素设置margin和padding是否生效（以span、img为例）
Yeee_F
08-10 1946
行内元素设置margin和padding是否生效（以span、img为例）
给行内元素设置padding和margin是否有效
热门推荐
qq_37621289的博客
09-26 2万+
块级元素的padding和margin值的设置都是有效的。行内元素和块级元素一样，都是盒子模型。但是今天做网页时发现给span设置margin-top值并没有效果，所以就想检测一下行内元素的padding和margin值的设置是否有效。代码运行结果如下： 可以看出margin-top和margin-bottom并没有起作用。下面看左右内边距： 可以看到行内元素的margin-left和mar...
行内元素和与行内块元素的margin-top问题
KKRK_的博客
12-09 1607
行内元素和与行内块元素的margin-top问题 内联(行级)元素 不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。 源代码： 给行内元素加padding属性，是可以设置的,也可以设置margin-left属性。 <style>
CSS基础：margin在行内元素及行级块元素失效&两个元素之间margin重叠
weixin_52854090的博客
10-07 330
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ /* 行内元素margin上下被忽略 */ margin-top: 50px; margin-bottom: 100px; /* 行内元素margin左右不能使用auto,可以.
前端面试题-行内元素和块级元素
南北极之间
06-20 845
一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML CSS Example 四、块级元素示例 HTML CSS Example 五、行内元素的特点 5.1 和其他元素都在同一行上 5.2 高，行高及外边距和内边距不可改变 5.3 宽度就是它的文字或图片的宽度，不可改变 5.4 行内元素只能容...
css行内元素padding,margin,width,height没有变化
09-25
主要介绍了css行内元素设置padding,margin,width,height没有变化的解决方法，需要的朋友可以参考下
全面了解行内元素与块级元素的区别
09-24
下面小编就为大家带来一篇全面了解行内元素与块级元素的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
12-13
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
css盒模型和块级、行内元素深入理解
09-25
盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成,需要了解的朋友可以深入参考下
行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗?
最新发布
wangxuanyang_k的博客
10-22 404
在HTML和CSS中，元素通常被分为两种主要类型：块级元素（Block-level elements）和行内元素（Inline elements）。它们之间的主要区别在于它们的显示方式和如何影响文档的布局。
前端 css（行内元素 块元素） padding和margin的区别
weixin_42350044的博客
02-11 248
行内元素： margin-left margin-right padding-left padding-right有效 padding-top padding-bottom margin-top margin-bottom 无效 块状元素： padding margin 都有效 注意：行内元素padding-top padding-bottom对自身元素可以设置是可以增加的，但不会周围元素产生影响，所以说是无效的。 ...
互相嵌套的块元素，使用margin-top，导致父元素向下移动的解决方法
qq_51758711的博客
10-19 408
【代码】互相嵌套的块元素，使用margin-top，导致父元素向下移动的解决方法。
button是块级元素吗_CSS篇(008)-块级元素和行内元素的具体区别是什么？
weixin_39722375的博客
11-28 929
答案：- 块级元素(block)特性： - 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; - 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;- 内联元素(inline)特性： - 和相邻的内联元素在同一行; - 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/paddin...
【前端】CSS
粉墨白伶的博客
10-26 1726
Cascading Style Sheets 层叠样式表能够对网页中的元素位置的排版进行像素级精确控制，实现美化页面的效果。
块状元素和行内元素的margin,padding的区别
Buddha_ITXiong的博客
03-12 2244
我们知道在做网页布局的时候一般是采用div+css的方式来做页面布局的，div+css布局最重要的是要理解块状元素和行内元素，我们把块状元素，行内元素通过float浮动的方式来把相应的元素摆放到正确的位置上去，那么什么是块状元素？什么是行内元素呢？以及块状元素和行内元素分别有哪些？什么是块状元素？我用自己觉得最通俗易懂的语言来解释的话就是：块状元素的默认的宽度就是100%，也就是占据了整行，不允许...
浅谈行内元素的内边距padding和外边距margin
筱葭的博客
03-08 1万+
行内元素的内边距对左、右、下起作用。 行内元素的外边距只对左、右起作用。 *{ margin: 0; padding: 0; } .span1{ background: red; margin: 20px; } .span2{ background: red; padding: 20px; }
行内元素的margin和padding值
高山景行，一尘不染
07-31 1156
我们都知道块级元素都有margin的四个值，和padding的四个值。 其实行内元素设置了margin-top、margin-bottom、padding-top、padding-bottom值是真的是无效；不过要注意一点，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。   有的时候只可意会不可言传，所以还是自己多写几个demo，就理解了。布局也是...
行内元素、块元素、行内块元素
09-18
而行内块元素具备了行内元素和块元素的特点，可以自由设置元素的宽度和高度，并且可以在一行中放置多个行内块元素。一些常见的行内元素有：a、span、em、strong等；常见的块元素有：div、p、h1-h6等；常见的行内块...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值