行内元素：

1、margin：0 20px；只可以定义左右。

2、pading：20px 20px 20px 20px；上下左右都有效

例如span：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        span{

            background-color:red;

            padding-top:20px;

            padding-left:20px;

            padding-right:20px;

            padding-bottom:20px;

            margin-left:20px;

            margin-right:20px;

        }

    </style>

</head>

<body>

    <span>你好</span>

    <a>今天的报道</a>

</body>

</html>

效果：

CSS——行内元素的margin与padding的更多相关文章

  1. 关于行内元素的margin padding一些说明；background-color的范围

    ①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...

  2. 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  3. 行内元素的margin只能左右有效。上下无效。

    行内元素的margin只能左右有效.上下无效.

  4. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  7. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  8. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  9. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

随机推荐

  1. windows下检測文件改变

    这个主要是应用在我前一篇博客里提到的脚本热载入功能. 主要实现的功能检測目录内文件的变化(改变.新增.删除.重命名),当发现改变的时候通知lua又一次载入脚本.基本上就是一个windows api的使 ...

  2. windows bat命令 开启关闭Oracle服务

    0.吐槽 单位发的ThinkPad T61.太弱小了. 问题是我去百度下T61,发现它好贵好贵.真心无力吐槽.还不如给我发台外星人,廉价点的. . Oracle一开就内存就不够了.所以绝对不能让它开机 ...

  3. 传智播客JDBC视频教程

    视频介绍: 一些视频教程通过浅显案例来让刚開始学习的人感到轻松,可是课程中编写的代码不能直接应用于项目中:而本套视频教程正好相反,视频解说者李勇老师以技术见长.性格朴实无华.不善于幽默搞笑.李勇老师编 ...

  4. docker（1）：virtualbox 安装CoreOS系统，配置registry-mirror

    本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51093850 未经博主同意不得转载. 博主地址是:http://blog.csd ...

  5. jedis 2.7.2 jar

    jedis 2.7.2 已经公布. 源码https://github.com/xetorthio/jedis/releases/tag/jedis-2.7.2 jar 下载地址  http://dow ...

  6. html 转word

    今日头条发表文章 python-docx — python-docx 0.8.6 documentation http://python-docx.readthedocs.io/en/latest/

  7. kentico9开始移除的webpart

    https://devnet.kentico.com/articles/fighting-featuritis https://blog.intercom.com/product-strategy-m ...

  8. Scala 返回多个值

    class A{ var c var d def return={ (c,d,"soyo") //以元组形式返回 }}调用: val s=new A var(a1,a2,a3)=s ...

  9. 91. Ext中获取combobox中的valueField和displayField的值

    转自:https://blog.csdn.net/jcy472578/article/details/42113119Ext.getCmp("schemaVersion").val ...

  10. Coursera Algorithms week3 快速排序 练习测验: Decimal dominants（寻找出现次数大于n/10的元素）

    题目原文: Decimal dominants. Given an array with n keys, design an algorithm to find all values that occ ...