行内元素：

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. Stockbroker Grapevine POJ 1125 Floyd

    Stockbroker Grapevine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37069   Accepted: ...

  2. [codevs 1183][泥泞的道路（二分+spfa）

    题目:http://dev.codevs.cn/problem/1183/ 分析:这个和最优比率生成树很像,都可以二分答案的,只不过判定方面一个是求是否有最短路径,一个是求是否有生成树.假设等待判定的 ...

  3. Mysql 使用delete drop truncate 删除数据时受外键约束影响解决方案

    先禁用数据库的外键约束: set foreign_key_checks=0; 进行删除操作 delete.drop.truncate 恢复数据库外键约束: set foreign_key_checks ...

  4. ISO和焦距

    要说什么是ISO还要从传统胶片相机说起,ISO称作为感光度,它是衡量传统相机所使用胶片感光速度的国际统一指标,其反映了胶片感光时的速度(其实是银元素与光线的光化学反应速率).而对于现在并不使用胶片的数 ...

  5. 网络协议IPV6基础知识点集锦

    由于互联网的快速发展与普及,原有的IPV4地址已不能满足网络用户的需求,虽然NAT可以缓解IPV4地址的耗尽,但NAT破坏了网络环境的开放.透明以及端到端的特性,因此IPV6地址协议应运而生. IPV ...

  6. [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS

    domStreams enable you to pass additional data along the stream that can be provided by the template ...

  7. 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换

    路由其实也可以很简单-------Asp.net WebAPI学习笔记(一)   MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...

  8. Oracle Study之--Oracle 11gR2通过RMAN克隆数据库

    Oracle Study之--Oracle 11gR2通过RMAN克隆数据库 Purpose of Database Duplication A duplicate database is usefu ...

  9. Analyze提示:Value stored to &quot;***&quot;is never read

    text这个变量没有被使用,在当前类中搜索'text'这个变量发现仅仅是被赋值并没有被使用. 提示意思是:删除或者凝视这行代码;

  10. (WIP) DPDK理论学习(by quqi99)

    作者:张华  发表于:2016-04-22版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 组成模 ...