文档章节

web前端j技术杂谈--css篇(1)--浅谈margin

H
 H_J
发布于 2014/09/01 20:24
字数 921
阅读 16
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

Margin是什么?

   CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

   我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”),我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

Margin的特性 :

  margin始终是透明的。

  margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。

  外边距的 margin-width 的值类型有:auto | length | percentage

margin在块元素、内联元素中的区别:

margin在块级元素下,他的性能可以完全体现,上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离(但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识)

margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。

这是因为边界应用于内联元素时不改变元素的行高度,如果你要改变内联元素的行高即类似文本的行间距,那么你只能使用这三个属性:line-height,fong-size,vertical-align。请记住,这个影响内联元素高度的是line-height而不是height,因为内联元素是一行行的,定一个height的话,那这到底是整段inline元素的高呢?还是inline元素一行的高呢?这都说不准,所以统一都给每行定一个高,只能是line-height了。

margin-top/margin-bottom对内联元素没有多大实际效果,不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px 20px 30px 40px;,左边这个css如果写在inline元素上,他的效果大致是,上下无效果,左边离他相邻元素或者文本距离为40px,右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。

最后在内联元素中还有上文我们提到的非可置换inline元素(non-replaced element),这些个元素img|input|select|textarea|button|label虽然是内联元素,但margin依旧可以影响到他的上下左右!

总结下来margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。                                          

© 著作权归作者所有

H

H_J

粉丝 20
博文 19
码字总数 27342
作品 0
成都
私信 提问
个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

2017/12/25
0
0
WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪
2017/07/31
0
0
大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

SFLYQ
2017/07/14
0
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
2018/05/11
0
0
CSS——把“可以动的盒子”更优雅地展示:③ 常用的“布局”

前言: 拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给...

itsOli
05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 我的视频网站vip账号和我厚脸皮的朋友们

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Cobbage :分享小海的单曲《衡山路(2016现场版)》: 《衡山路(2016现场版)》- 小海 手机党少年们想听歌,请使劲儿戳(这里) @FalconChe...

小小编辑
今天
6
0
Spring Cloud Alibaba 实战(十二) - Nacos配置管理

> 本章主要内容是:使用Nacos管理配置以及实现配置管理的原因,配置如何管理以及动态刷新和最佳实现总结,最后是Nacos配置刷新原理解读 该技术类似于Spring Cloud Config 1 配置管理的意义 项目...

JavaEdge
今天
9
0
面试官问你编码相关的面试题,把这篇甩给他就完事!

前情回顾:Java中一个字符占两字节 但为什么new String("字").getBytes().length 返回3个字节 今天主要聊一聊: 字节 字符 字符集 编码 字符编码 Java 内码和外码 Unicode 字节 例如 :00001...

gzc426
今天
10
0
写的简单sh脚本2

#!/bin/bashexport LANG="en_US.UTF-8"#chmod +x filename 记得给文件加可执行权限#./vsimstart.sh#启动vsim项目echo "start vism"#207------------------------------assets=vsim-a......

hexiaoming123
昨天
7
0
java基础(1)变量和常量

概要和总结: 数据类型图: 基本数据类型:只有基本功能-----保存数据 (4类8种)byte-short-int-long-float-double-char-boolean 引用数据类型:有更多功能,保存数据,处理数据...

煌sir
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部