行内元素：

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. HDU 1546 Idiomatic Phrases Game 求助！help！！！

    Idiomatic Phrases Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  2. python_swift_project_middleware

    1. 写openstack swift的middleware 首先要确定swift用的是哪个middleware文件. 比如healthcheck这个中间件,在机器上有很多同名文件如下, 这两行可能是 ...

  3. Redis: Useful commands

    SELECT X - Select database (the X must be int) CONFIG GET databases - Get databases number INFO keys ...

  4. 【Python】Python 标准库 urllib2 的使用细节

    转自:http://zhuoqiang.me/python-urllib2-usage.html http://www.cnblogs.com/txw1958/archive/2012/03/12/2 ...

  5. vmware9.0 install ubuntu

    1)安装vmware 9.0  + 注册码2)因为是.bundle文件,执行下列命令:sudo chmod +x VMware-Workstation-7.1.1-282343.i386.bundle ...

  6. Linux内核之于红黑树and AVL树

    为什么Linux早先使用AVL树而后来倾向于红黑树?       实际上这是由红黑树的有用主义特质导致的结果,本短文依旧是形而上的观点.红黑树能够直接由2-3树导出.我们能够不再提红黑树,而仅仅提2- ...

  7. xul 创建一个按钮

    MDN Mozilla 产品与私有技术 Mozilla 私有技术 XUL Toolbars 添加工具栏按钮 (定制工具栏) 添加工具栏按钮 (定制工具栏) 在本文章中 创建一个 overlay 在工具 ...

  8. JavaScript Patterns 2.1 Writing Maintainable Code

    Revisiting the code after some time has passed requires: • Time to relearn and understand the proble ...

  9. Makefile 实际用例分析（二） ------- 比较通用的一种架构

    之前已经讲了这一篇文章:Makefile实际用例分析(一)-----比较通用的一种架构 现在这篇其实和那个差的不是很多,只是在布局上有些差别(这个makefile也是论坛上一起讨论过的,囧,忘了哪个论 ...

  10. XMLHttpRequest 对象-回调函数

    回调函数是一种以参数形式传递给另一个函数的函数. 如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数. ...