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

最新推荐文章于 2024-04-18 11:48:44 发布
VIP文章 最新推荐文章于 2024-04-18 11:48:44 发布
阅读量1.7k 收藏 4
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzxlemontea/article/details/107500259
版权

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

 <div class="container">
        <p>
            <span>SPAN1</span>
            <span>SPAN2</span>
        </p>
        <p>段落2<
最低0.47元/天 解锁文章
缝合怪
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
批量修改标签css样式以input标签为例
11-30
$("input[style]").each(function(){ $(this).css("border-width","1"); $(this).css("background-color","#A9A9A9"); });
HTML5+CSS3学习笔记（七）行内元素设置margin和padding是否生效（以span、img为例）
Yeee_F
08-10 1845
行内元素设置margin和padding是否生效（以span、img为例）
行内元素设置内边距和外边距的问题
qq_41884544的博客
01-30 5581
试图给行内元素设置内边距的时候出现了点问题，给块级元素设置内外边距都有明显的效果，那么给行内元素设置内外边距是否有效果呢。 一、行内元素设置内边距 1.代码展示 <style> *{ margin: 0px; padding: 0px; } span{ padding: 10px 20px 30px 40px; } div{ width: 50px; h.
浅谈行内元素的内边距padding和外边距margin
筱葭的博客
03-08 1万+
行内元素的内边距对左、右、下起作用。 行内元素的外边距只对左、右起作用。 *{ margin: 0; padding: 0; } .span1{ background: red; margin: 20px; } .span2{ background: red; padding: 20px; }
元素外边距的问题
qq_45329460的博客
02-22 392
主要说明了元素设置外边距时需要注意的一些问题！
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>
css设置内外边距,css内外边距属性
weixin_34614567的博客
08-04 4828
盒子模型：所有HTML元素可以看作盒子,在CSS中，"box model"是用来设计和布局时 使用。CSS盒模型本质上是一个盒子， 封装周围的HTML元素， 它包括：边距，边框，填充和实际内容。外边距属性：设置对象四边的外部边距内联块级元素和块级元素的可以设置外边距。内联元素可以设置左、右两边的外边距；若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素。如果提供全部四个参数值，将...
CSS3.0
weixin_44960905的博客
03-25 2547
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
【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-19 1236
一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置
【CSS基础学习】行内元素，块级元素，行内块级元素
01-08
文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素（inline）： 块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 ...
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
09-24
下面小编就为大家带来一篇浅谈CSS块级元素与行内元素(内联元素)的区别和联系 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS行内元素和块级元素的居中实例分析
09-25
本文通过具体实例给大家详细介绍了CSS行内元素和块级元素的居中的实现方法，非常简单实用，推荐给大家，希望大家能够喜欢。
css盒模型和块级、行内元素深入理解
09-25
盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成,需要了解的朋友可以深入参考下
进一步理解CSS编程中的块级元素和行内元素
09-24
主要介绍了CSS编程中的块级元素和行内元素,是CSS入门学习中的基础知识,需要的朋友可以参考下
css复合选择器
2302_79590880的博客
04-15 420
css复合选择器整理
【CSS】margin（外边距）属性以及如何消除塌陷现象
2301_79982543的博客
04-15 464
在实际开发中，人们已经很少使用表格等html标签，我们通常使用div标签加上padding属性与margin属性进行网页布局。
PostCSS概述
Min_nna的博客
04-18 504
PostCSS 是一个用于使用 JavaScript 插件转换 CSS 的工具。它可以让开发者使用最新的 CSS 语法，支持变量和混合（mixins）、未来的 CSS 特性等，同时还能够自动添加浏览器前缀、优化最终的 CSS 文件。PostCSS 本身是一个平台，它通过插件来扩展其功能，这些插件可以执行各种任务，从而使 PostCSS 成为一个非常强大且灵活的工具。
CSS导读 （CSS的三大特性 上）
最新发布
2301_79341065的博客
04-18 853
（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）
CSS基础：margin属性4种值类型，4个写法规则详解
u013179804的博客
04-15 887
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gz.h后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中。
行内元素和块级元素的区别
07-14
行内元素和块级元素是HTML中常用的两种元素类型，它们在布局和显示上有一些区别。 1. 块级元素： - 独占一行：块级元素会独占一行，每个块级元素都从新的一行开始，并且会在前后添加额外的空白。 - 宽度默认为父元素宽度：块级元素的宽度默认是其父元素的100%。 - 可以设置宽度、高度、内外边距：块级元素可以通过设置CSS属性来指定它们的宽度、高度以及内外边距。 - 支持嵌套：块级元素可以包含其他块级元素和行内元素。 2. 行内元素： - 不独占一行：行内元素不会独占一行，它们会在同一行上排列，直到一行放不下为止。 - 宽度由内容决定：行内元素的宽度由其内容决定，不能通过CSS直接设置宽度。 - 不支持设置高度、内外边距：行内元素的高度由其内容决定，不能通过CSS直接设置高度、内外边距。 - 不支持嵌套块级元素：行内元素不能包含块级元素，但可以包含其他行内元素。 需要注意的是，通过CSS的display属性可以改变元素的显示类型，将行内元素转换为块级元素或将块级元素转换为行内元素。这样可以改变元素默认的布局行为。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值