CSS-内联元素的盒子

已于 2023-01-02 14:26:49 修改
阅读量141 收藏
点赞数 1
分类专栏： css 文章标签： css html 前端 web css3
于 2022-11-12 00:07:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64933233/article/details/127815305
版权

文章目录

内联元素的盒子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      span {
        background-color: #bfa;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .s1 {
        /*
          * 内容区、内边距、边框、外边距
          */
        padding-left: 100px;
        padding-right: 100px;
        border: 1px blue solid;
        margin-left: 100px;
        margin-right: 100px;
      }
      .s2 {
        margin-left: 100px;
        margin-top: 200px;
        margin-bottom: 200px;
      }
    </style>
  </head>
  <body>
    <span class="s1">我是一个span</span>
    <span class="s2">我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <div class="box1"></div>
  </body>
</html>

请添加图片描述

1. 内联元素不能设置 width 和 height

/* width: 200px;
height: 200px; */

2. 设置水平内边距

内联元素可以设置水平方向内边距

padding-left: 100px;
padding-right: 100px;

3. 垂直方向内边距

内联元素可以设置垂直方向的内边距，但是不会影响页面的布局

/* padding-top: 50px;
padding-bottom: 50px; */

4. 为元素设置边框

内联元素可以设置边框，但是垂直的边框不会影响到页面的布局

border: 1px blue solid;

5. 水平外边距

内联元素支持水平方向的外边距

margin-left: 100px;
margin-right: 100px;

6. 为右边的元素设置一个左外边距

水平方向的外边距不会重叠，而是求和

margin-left: 100px;

7. 内联元素不支持垂直外边距

margin-top: 200px;
margin-bottom: 200px;
王十四兄
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS块级盒子和内联盒子
fire_Oreo_999的博客
04-27 951
CSS块级盒子和内联盒子 块级盒子（Block box） 块级盒子： 每个盒子都会换行。 宽（width）和高（height）属性可以发挥作用，未设置宽的情况下可以扩展并占据父容器的横向空间。 外边距（margin）、边框（border）和内边距（padding）会将其他元素从当前盒子周围推开。 HTML代码： <DOCTYPE html> <html> ...
html-css-basics
04-02
4. **布局技术**：浮动（`float`）、定位（`position`）和Flexbox（弹性盒子布局）以及Grid（网格布局）是现代CSS布局的主要方法。 5. **层叠与继承**：CSS的“级联”意味着多个规则可以应用于一个元素，而“继承”...
h5---------内联元素的盒子
学习是我快乐， 吗
07-05 197
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; span{ background-color: #bfa; }
css---内联元素的盒子模型
chen_zan_yu_的博客
05-01 412
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; } .box1{ wi...
css有关内联元素的盒子总结
m0_51144154的博客
01-05 357
一、特点总结： 内联元素不能设置width和height 内联元素可以设置水平内边距、垂直方向内边距(垂直方向内边距不会影响页面布局) 内联元素可以设置边框，但是只有垂直的的边框不影响页面的布局 内联元素可以设置水平外边距，但是不支持垂直外边距 二、内联元素与块元素转换 5. display样式可以修改元素类型; 可选值： inline : 可以将一个元素作为内联元素显示 block ：可以将一个元素设置块元素显示 inline-block : 将一个元素转换为行内块元素 可以使一个元素既有悍内元素特点
h5-----------display
学习是我快乐， 吗
07-05 1939
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; a{ background-color: #bfa; /
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
12-13
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
CSS-Resune-Task
03-10
3. **布局技术**：CSS提供了多种布局方式，如传统的流体布局、定位（positioning）、Flexbox（弹性盒子布局）和Grid（网格布局）。Flexbox适用于一维布局，如导航栏或响应式设计。Grid则适合二维布局，如网站页面的...
HTML-and-CSS-Basic
03-19
3. **盒模型**：CSS中的每个元素都是一个盒子，包括内容区域、内边距、边框和外边距，影响元素的大小和位置。 4. **定位**：`position`属性（static, relative, absolute, fixed）控制元素在页面上的定位。 5. **...
CSS-HTML-Learning:CSSHTML学习
03-18
3. **内联元素与块级元素**：内联元素如`<span>`、`<a>`，在一行内显示；块级元素如`<div>`、`<p>`，每个占据一整行。 4. **文档结构**：`<!DOCTYPE>`声明文档类型，`<html>`是根元素，`<head>`包含元数据（如标题）...
CSS内联样式盒模型
一李
10-15 327
内联元素的盒子 内联元素不能设置width和height(没用） 可以设置水平方向的内边距。 可以设置垂直方向的内边距，但是不会影响页面的布局。 可以设置边框，但是垂直方向的边框不会影响布局。 支持水平方向的外边距（水平方向的不会重叠，会求和），不支持垂直方向的外边距。 .s1{ width:200px; height: 200px; /*padding...
第八课--H5内联 SVG
阅读之后，对你有帮助，那就点个赞再走吧
08-03 179
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SV...
html 盒子模型基础（内联元素的盒模型）（二）
余正源的博客
02-07 1457
1.内联元素的盒子模型 .box1 { width: 100px; height: 100px; background-color: yellowgreen; } .s1 { /*设置背景颜色*/ background-color: yellow; /*设置宽和高*/ /*width:
html块级元素和内联元素区别详解
热门推荐
雾里看花
03-24 4万+
块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性： 和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bott
内联元素的盒子模型
wuxiao18的博客
06-12 387
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ background-color: #bfa; ...
HTML5高级之块元素和内联元素
Wendy
11-15 3040
元素可以分为两种，一种是块元素，一种是内联（行内、内嵌）元素。块元素比如常用的div、p、h1等，内联元素比如常用的span、i、a等。接下来详细说明这两种元素各自的特性、使用方法以及两者之间的相互转化。 1、块元素的特性       1）默认独占一行       2）没有宽度时，默认撑满一行       3）支持所有css命令 如图所示： 代码：
CSS盒子模型：深入理解块级盒子与内联盒子
最新发布
2302_77399030的博客
04-03 358
理解CSS中块级盒子和内联盒子的概念对于掌握布局技巧和调整页面元素的显示效果至关重要。简而言之，块级盒子通常用于布局和组织内容，而内联盒子则用于调整文本和内联元素的样式。通过设置display属性，我们可以轻松地在这两种盒子类型之间进行切换，以满足各种布局需求。
CSS块级元素、内联元素概念
CDSN大帝的专栏
12-15 475
块元素（block element） address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易，也是css layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水
html块级元素和内联元素区别详解(转)
stail111的专栏
12-31 199
[b]块级元素(block)特性：[/b] 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; [b]内联元素(inline)特性：[/b] 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top...
CSS基础：盒子模型与选择器优先级解析
CSS盒子模型描述了网页元素在页面上占用的空间，分为两种模型：W3C标准盒子模型和IE低版本的怪异盒模型。 - **W3C标准盒子模型**：在这个模型中，元素的实际内容宽度和高度（content）是我们设置的width和height...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王十四兄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值