css 给inline和inline-block元素设置margin和padding

经过简单的测试，行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的，下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom。经过测试，margin-top和margin-bottom都没有作用。而设置padding-top以后，元素边框则会向上超出父元素，如下图所示，而不是像正常的块元素一样表现。

　　而给行内元素加上padding-bottom后，显示效果如下：

　　确实显示出了效果，但是只有效果，而不影响其他元素（因为下一行内的span元素占据了上一行中span元素的padding-bottom）

css 给inline和inline-block元素设置margin和padding相关推荐

行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
多方法解决设置width:100%再设置margin或padding溢出的问题
2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...
html li padding,求大神来看为li元素设置相同的padding为何padding-bottom和padding-right为多出一部分_html/css_WEB-ITnose...
代码如下无标题文档回复讨论(解决方案) 哪里有问题看了半天没看懂你问的是什么哪里有问题 ul上下的padding是一样的,但是下面的空白明显大于上面看了半天没看懂你问的是什么 ul上下的pa ...
CSS——行内元素的margin与padding
行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效例如span: <!DOCTYPE html> &l ...
行级元素和块级元素的margin和padding
行级元素padding都生效,但margin上下不生效 div{display: inline;background-color: aqua;padding: 10px 10px;margin: 10 ...
常见的内联元素(inline)和块级元素(block)
1.内联元素(inline): a – 锚点 abbr – 缩写 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候 ...
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
【css】浮动和定位对元素的宽度-外边距或其他元素的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...

css 给inline和inline-block元素设置margin和padding

css 给inline和inline-block元素设置margin和padding相关推荐

最新文章

热门文章