内联元素可以直接设置margin.padding么？

Posted 2023-04-14

可以设置，不过margin、padding对内联元素不起作用而已。
也就是说，设了等于白设。这类元素一般是：<a>、<span>元素等
不过，内联元素有几个比较特别的：（特别之处是：有块状元素的特性，但是又不换行）
像img、object这一类的内联元素，是可以设置margin、padding的，不过这两个元素要显示的内容是外部引用的资源，比如img用src引用外部地址的图片；object引用外部资源的swf或者是wmv。
而select、input、textarea这三个元素也是内联元素，即使是空标签，标签里面没有内容，也在页面上占据一定的面积，是可以设置margin和padding的。 参考技术A 直接在内联元素中加margin和padding是不起作用的，必须改变其display属性，为block! 参考技术B 内联元素不能使用margin.padding，除非你用块级元素
display:block;好像是这么拼写的 参考技术C margin : auto | length 参数auto: 值被设置为相对边的值参数length: 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说，左右外延边距可以是负数值。padding : length 参数length:由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。border : border-width || border-style || border-color各参数属性是复合属性。请参阅各参数对应的属性。

块级元素和行内元素

一、块级元素和行内元素的区别

（1）块级元素会独占一行，其宽度自动填满其父元素宽度；

　　 行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。

（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。

（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

二、常见的块级元素

 

 三、常见行内元素

 

 四、块级元素和行内元素之间的相互转换

display:inline-block;

display:inline;

display:block;

五、可变元素（根据上下文语境决定是块级还是行内元素）