行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值
曾经学过的教程中写明:行内元素的特点有:
1、与其他元素在同一行
2、宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置
当时对于第二点中的内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置有一些疑惑,经过验证后,发现这4个属性是可以设置的,但是不建议设置。
如代码所示,行内元素a设置
margin-top:20px;margin-right:20px; 样式中简写为margin:20px 20px 0 0;
padding-top:5px; padding-right:5px;样式中简写为padding:5px 5px 0 0;
<style>
*{padding:0;margin:0}
div.wrap{width:200px;height:200px;border:1px solid red;margin:10px;word-wrap:break-word;}
.inline-element a{margin:20px 20px 0 0;padding:5px 5px 0 0;height:20px;line-height:20px;background:#ccc;}
</style> <div class="wrap">
<span class="inline-element"><a href="">北京</a><a href="">上海</a><a href="">天津</a><a href="">辽宁</a><a href="">吉林</a><a href="">黑龙江</a></span>
</div>
显示如下:图中的行内元素
<a href="">北京</a>
黄色部分为margin、紫色部分为padding;红色线条为border;元素背景色为灰色。
可以看出margin-top和padding-top在边框以外。因为margin的背景色透明,因此margin-top的设置对行内元素的显示不影响;
而padding-top的背景色为灰色,可以看到下方的a元素的背景色会覆盖上方的a元素;如果a元素的背景色是透明色的话,那么padding-top值设置对行内元素的显示也不影响。
因此我们要记住:对于行内元素尽量不要设置margin-top、margin-bottom;padding-top、padding-bottom值;
行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值的更多相关文章
- 行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释
最近在看张鑫旭大佬的<css世界>,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...
- 两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?
首先这里的div设置为了行内块元素,span本身为行内元素,并且设置了* {padding: 0; margin: 0;},那怎么清除元素之间的空白缝隙呢?? (1)给元素加浮动 <!DOCTY ...
- 行内元素的上下margin 和 img元素的上下margin
行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS--块级元素和行内元素
相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...
- 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?
4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
随机推荐
- js 学习总结
new array()[] []表示数组new object(){} {}表示对象 JavaScript 对象 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) ...
- split a string in C++
This is my favourite way to iterate through a string. You can do what you want per word. string line ...
- oc知道经纬度求位置
CLLocation *newLocation = [locations lastObject]; CLGeocodeCompletionHandler handler = ^(NSArray *pl ...
- Concepts and Tricks In CNN
转自:http://blog.cvmarcher.com/posts/2015/05/17/cnn-trick/ 这篇文章主要讲一下Convolutional Neural Network(CNN)里 ...
- android:onKeyDown
android项目中的返回键有时处理不当,会是一个十分麻烦的问题. 在监听物理键时,可以用onKeyDown方法,Activity已经自己有KeyEvent.Callback这个接口了,因为项目有使用 ...
- project文件问题
到编译文件中看看,红色的删除,坤哥这样做的 .
- avd
http://stackoverflow.com/questions/2662650/making-the-android-emulator-run-faster http://www.cnblogs ...
- gnome3
http://askubuntu.com/questions/67753/how-do-i-add-an-application-to-the-dash https://wiki.gnome.org/ ...
- 登录验证的js;JS验证邮箱 验证密码
var auth_email = 0, auth_pwd = 0, auth_captcha = 0, url_ajax = "/protected/user_ajax.php"; ...
- MySQL SQL优化——分片搜索
DELIMITER $$ DROP PROCEDURE IF EXISTS `test_release`.`Sp_JP_A_NotifyBegin`$$ CREATE DEFINER=`encysys ...