【CSS基础】关于行内元素的内外边距问题

最新推荐文章于 2023-10-22 04:01:52 发布
最新推荐文章于 2023-10-22 04:01:52 发布
阅读量1.8k 收藏 4
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzxlemontea/article/details/107500259
版权
本文探讨了CSS中行内元素的内外边距特性，通过实验展示了设置padding和margin对行内元素的影响。当为行内元素设置padding时，left、right和bottom的padding生效但不撑开父元素，而padding-top需要依赖外层容器的外边距才能体现效果。设置margin时，仅左右方向的margin生效，上下方向无效果且不撑开父元素。
摘要由CSDN通过智能技术生成

对于行内元素的内外边距问题有时候分的不是很清晰，特此做了一个小实验加深印象：
首先整体html结构为：

 <div class="container">
        <p>
            <span>SPAN1</span>
            <span>SPAN2</span>
        </p>
        <p>段落2<
最低0.47元/天 解锁文章
缝合怪
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中行内元素和块级元素的区别
09-27
此外，`display: inline-block`还可以创建一种“行内块级元素”，它结合了行内元素和块级元素的特性，可以在一行内显示，同时可以设置宽高和内外边距。 5. **总结** CSS中的行内元素和块级元素是网页布局的基础，...
浅谈行内元素的内边距padding和外边距margin
筱葭的博客
03-08 1万+
行内元素的内边距对左、右、下起作用。 行内元素的外边距只对左、右起作用。 *{ margin: 0; padding: 0; } .span1{ background: red; margin: 20px; } .span2{ background: red; padding: 20px; }
行内元素设置内边距和外边距的问题
qq_41884544的博客
01-30 5701
试图给行内元素设置内边距的时候出现了点问题，给块级元素设置内外边距都有明显的效果，那么给行内元素设置内外边距是否有效果呢。 一、行内元素设置内边距 1.代码展示 <style> *{ margin: 0px; padding: 0px; } span{ padding: 10px 20px 30px 40px; } div{ width: 50px; h.
HTML5+CSS3学习笔记（七）行内元素设置margin和padding是否生效（以span、img为例）
Yeee_F
08-10 2118
行内元素设置margin和padding是否生效（以span、img为例）
行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗?
最新发布
wangxuanyang_k的博客
10-22 506
在HTML和CSS中，元素通常被分为两种主要类型：块级元素（Block-level elements）和行内元素（Inline elements）。它们之间的主要区别在于它们的显示方式和如何影响文档的布局。
HTML中详述外边距样式属性（margin）与内边距样式属性（padding）
热门推荐
zzu957的博客
07-15 2万+
外边距样式属性（margin） 外边距样式属性（margin）：设置边框外的距离。 属性：margin-top样式属性，margin-bottom样式属性，margin-left样式属性和margin-right样式属性。 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>
前端PC端布局CSS基础
03-19
}` 用于重置元素的默认内外边距。 二、CSS字体属性 1. `font-family`：定义字体系列，如 `font-family: Arial, sans-serif;`。 2. `font-size`：定义字体大小，如 `font-size: 16px;`。 3. `font-weight`：定义字体...
前端CSS基础入门一个介绍
11-15
内外边距（padding和margin）用于调整元素的间距，而阴影可以通过`box-shadow`属性实现。 在布局方面，CSS提供了多种方法： 1. `display: block`使元素成为块级元素，占据整行。 2. `display: inline`使元素成为...
html中的行内元素和块级元素有哪些.pdf
05-08
因此，对行内元素设置高度、宽度、内外边距等属性都是无效的（置换元素除外）。 常见的行内元素有： * a - 锚点 * b - 粗体（不推荐） * big - 大字体 * br - 换行 * dfn - 定义字段 * em - 强调 * i - 斜体 * img...
CSS基础知识总结-新手入门篇
08-03
块级元素可以设置宽、高、内外边距等属性，并且可以包含任何类型的元素。 - **行内元素**：如`span`、`font`、`img`，它们在同一行内显示，不会自动换行。行内元素的宽度和高度不可设定，上下外边距无效，只能包含...
元素外边距的问题
qq_45329460的博客
02-22 425
主要说明了元素设置外边距时需要注意的一些问题！
CSS3.0
weixin_44960905的博客
03-25 2635
CSS3 Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 发展史 CSS1.0 CSS2.0 DIV+CSS，html与css结构分离的思想 CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画 快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &lt
给行内元素设置padding和margin是否有效
qq_37621289的博客
09-26 2万+
块级元素的padding和margin值的设置都是有效的。行内元素和块级元素一样，都是盒子模型。但是今天做网页时发现给span设置margin-top值并没有效果，所以就想检测一下行内元素的padding和margin值的设置是否有效。代码运行结果如下： 可以看出margin-top和margin-bottom并没有起作用。下面看左右内边距： 可以看到行内元素的margin-left和mar...
内外边距对行内元素块级元素的影响
PethZhang的博客
10-19 2346
1、内边距对父级元素的影响 当块级元素里面还是块级元素且没有定义宽高时，子块级元素的内边距会将父块级元素撑开； 但是当子元素为行内元素的时候，内边距对父级元素是无影响的。 如下例： div和span的内边距对父级div的影响 .d1{ border: solid 1px red; } .d2{ border: solid
CSS——行内元素间的默认边距
何惜戈
12-13 1918
简单写一个导航栏 &lt;style type="text/css"&gt; * { margin: 0px; padding: 0px; } #daohang { height: 40px; width: 100%; pa...
行内元素间距问题
皮哥不皮
03-11 1万+
问题描述： 经常遇到给display:inline-block的元素设置间距3px; 实际情况其间距一定大于3px(加float情况除外) 元素解释特点：在标准文档流里面，块级元素具有以下特点： 1. 总是在新行上开始，占据一整行； 2. 高度，行高以及外边距和内边距都可控制； 3. 宽度始终是与浏览器宽度一样，与内容无关； 4. 它可以容纳内联元素和其他块元素。
行内元素产生水平空隙的原因及解决方案
u010600693的专栏
05-26 6132
最近发现行内元素有时会莫名其妙的产生水平空隙，开始以为是外边距导致的，于是把所有的行内元素外边距都设置为0，结果还是存在，代码如下：<div class="span-wrap"> <span>行内元素</span> <span>行内元素</span> <span>行内元素</span> <span>行内元素</span> <span>行内元素</span>
行内元素的宽高不能设置,垂直外边距无用
chenzhawu3547的博客
05-26 1024
在标准文档流里面，块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。 行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度...
行内元素和块级元素的区别
07-14
- 不支持设置高度、内外边距：行内元素的高度由其内容决定，不能通过CSS直接设置高度、内外边距。 - 不支持嵌套块级元素：行内元素不能包含块级元素，但可以包含其他行内元素。 需要注意的是，通过CSS的display...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值