1. 内联元素不能设置width和height；
  2. 设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right；
  3. 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；
  4. 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；
  5. 水平外边距内联元素支持水平方向的外边距；
  6. 内联元素不支持垂直外边距；
  7. 为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <style type="text/css">
  8.             span {
  9.                 background-color: #FFA500;
  10.             }
  11.             /**
  12.              * 宽120 高120 颜色为#0000FF的div
  13.              */
  14.  
  15.             .box1 {
  16.                 width: 120px;
  17.                 height: 120px;
  18.                 background-color: #0000FF;
  19.             }
  20.  
  21.             .s1 {
  22.                 /*
  23.                      内容区、内边距 、边框 、外边距
  24.                  * */
  25.                 /*
  26.                  * 内联元素不能设置width和height,設置了也沒有效果
  27.                  */
  28.                 width: 200px;
  29.                 height: 200px;
  30.                 /*
  31.                  * 水平方向上内边距左为100px,右为100px
  32.                  */
  33.                 padding-left: 100px;
  34.                 padding-right: 100px;
  35.                 /*
  36.                  * 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
  37.                  */
  38.                 padding-top: 50px;
  39.                 padding-bottom: 50px;
  40.                 /*
  41.                  * 为元素设置边框,
  42.                  *     内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
  43.                  */
  44.                 border: 2px yellow solid;
  45.                 /*
  46.                  * 水平外边距100px
  47.                  */
  48.                 margin-left: 100px;
  49.                 margin-right: 100px;
  50.                 /*
  51.                  * 内联元素不支持垂直外边距,因此设置如下完全没有效果
  52.                  */
  53.                 margin-top: 200px;
  54.                 margin-bottom: 200px;
  55.             }
  56.  
  57.             .s2 {
  58.                 /*
  59.                  * 为右边的元素设置一个左外边距
  60.                  * 水平方向的相邻外边距不会重叠，而是求和
  61.                  */
  62.                 margin-left: 100px;
  63.             }
  64.         </style>
  65.     </head>
  66.  
  67.     <body>
  68.         <span class="s1">章台路</span>
  69.         <span class="s2">还见褪粉梅梢</span>
  70.         <span>试花桃树</span>
  71.         <span>愔愔坊陌人家</span>
  72.  
  73.         <div class="box1"></div>
  74.     </body>
  75.  
  76. </html>

效果：

代码放到github上面了：

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson16.html

自己可以运行下看看效果

前端学习 -- Css -- 内联元素的盒模型的更多相关文章

  1. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  2. css 内联元素

    内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一 ...

  3. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  4. CSS块级-内联元素，盒子模型

    CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...

  5. 前端研究CSS之内联元素块级化/区域大小/文字和图标的位置

    做了一天的小按钮基本都是文字+小图标的组合,问题挺多处理的不好,现在总结一下做个了断. //页面结构 <span class="b"> <a href=" ...

  6. CSS - 内联元素span 强制换行失败的可能原因

    在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left   or  float:right

  7. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  8. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  9. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

随机推荐

  1. 记一次SpringMVC碰到的坑

            在SpringMVC中,我们Controller中接收比如表单的参数,只要保证方法的形参的名字和表单中input元素的的name一样就可以接收到参数.         但是,我开发的一 ...

  2. Python基础(list和tuple)可变集合和‘不可变’集合

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...

  3. WebService快速上手

    一.WebService是什么? 核心特征:跨语言.跨平台.远程调用[如果是本地系统交互,使用rpc或者com技术就行] soap:HTTP + XML [基于Http的xml格式数据交互] wsdl ...

  4. CF 24 D. Broken robot

    D. Broken robot 链接. 题意: 一个方格,从(x,y)出发,等价的概率向下,向左,向右,不动.如果在左右边缘上,那么等价的概率不动,向右/左,向下.走到最后一行即结束.求期望结束的步数 ...

  5. 微服务监控zipkin、skywalking以及日志ELK监控系列

    0.整体架构 整体架构目录:ASP.NET Core分布式项目实战-目录 一.目录 1.zipkin监控 2.skywalking监控 3.ELK日志监控 asp.net Core 交流群:78746 ...

  6. pie的绕过方式

    目标程序下载 提取码:qk1y 1.检查程序开启了哪些安全保护机制 pie机制简介 PIE(position-independent executable) 是一个针对代码段.text, 数据段.*d ...

  7. Jenkins 构建运行java程序

    我们将在Jenkins建立执行一个简单的 HelloWorld 应用程序,构建和运行Java程序.打开网址:http://localhost:8080/jenkins 第1步- 转到Jenkins 仪 ...

  8. PAT甲题题解-1005. Spell It Right (20)-数位求和，水

    把每个位上的数字求和sum,然后以英文单词的形式输出sum的每个位 #include <iostream> #include <cstdio> #include <alg ...

  9. Intellij IDEA 文件修改提示星号

    https://www.cnblogs.com/zheting/p/7594073.html

  10. 20170831 php

    今天开始学习php 发现这个网站教程感觉入门很轻松 http://www.php.cn/code/25.html 配置环境遇到了端口占用的问题 解决方案: http://www.weekdian.co ...