曾经学过的教程中写明:行内元素的特点有:

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值的更多相关文章

  1. 行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

  2. 两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?

    首先这里的div设置为了行内块元素,span本身为行内元素,并且设置了* {padding: 0; margin: 0;},那怎么清除元素之间的空白缝隙呢?? (1)给元素加浮动 <!DOCTY ...

  3. 行内元素的上下margin 和 img元素的上下margin

    行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...

  4. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  5. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  6. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  7. CSS--块级元素和行内元素

    相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...

  8. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  9. [HTML/CSS]盒子模型,块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

随机推荐

  1. js 学习总结

    new array()[] []表示数组new object(){} {}表示对象 JavaScript 对象 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) ...

  2. 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 ...

  3. oc知道经纬度求位置

    CLLocation *newLocation = [locations lastObject]; CLGeocodeCompletionHandler handler = ^(NSArray *pl ...

  4. Concepts and Tricks In CNN

    转自:http://blog.cvmarcher.com/posts/2015/05/17/cnn-trick/ 这篇文章主要讲一下Convolutional Neural Network(CNN)里 ...

  5. android:onKeyDown

    android项目中的返回键有时处理不当,会是一个十分麻烦的问题. 在监听物理键时,可以用onKeyDown方法,Activity已经自己有KeyEvent.Callback这个接口了,因为项目有使用 ...

  6. project文件问题

    到编译文件中看看,红色的删除,坤哥这样做的 .

  7. avd

    http://stackoverflow.com/questions/2662650/making-the-android-emulator-run-faster http://www.cnblogs ...

  8. gnome3

    http://askubuntu.com/questions/67753/how-do-i-add-an-application-to-the-dash https://wiki.gnome.org/ ...

  9. 登录验证的js;JS验证邮箱 验证密码

    var auth_email = 0, auth_pwd = 0, auth_captcha = 0, url_ajax = "/protected/user_ajax.php"; ...

  10. MySQL SQL优化——分片搜索

    DELIMITER $$ DROP PROCEDURE IF EXISTS `test_release`.`Sp_JP_A_NotifyBegin`$$ CREATE DEFINER=`encysys ...