Css有一个问题，好长时间都没解决，内联元素使用margin和padding有没有效果? 百度

Posted 2023-04-28

Css有一个问题，好长时间都没解决，内联元素使用margin和padding有没有效果?

百度上还有一个说法，内联元素的margin上下不行，而padding只有上不行

div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

与之相反，像“span”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。（内边距padding上下无效，左右有效。）

常用的的行内元素就是 span 和 a ，其他的行内元素，比如 strong、b、font 这些都是以前在html中用来设定文字样式的标记，而使用CSS以后，这些标记应该都不用了，所以知道它们没有什么用，弄不好反而让初学者混淆了一些概念。

block表现出来的特点是折行的.
inline表现出来是不换行的.

但如果给一个元素加入了浮动(float)的话.他们就会排在一行,按自然顺序.不管是block还是inline定义了浮动之后,可以定义高度,宽度.

inline单独存在的条件下是定义不了宽度高度的.block可以.

例如：
a正常情况下是不能定义高度的。宽度倒是可以定义，但是对鼠标有反应的只有文字部分
如果加上display:block的话，高度可以定义，但是不在一行了，整个块对鼠标都有反应了
如果加上float:left的话，能定义高宽，整块对鼠标有反应 但是 它是横向菜单。

一般来说块级元素可以包含块级元素和内联元素；
但内联元素只能包含内联元素。
要注意的是，每个特定的元素，能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。
比如 P 元素，只能包含内联元素，而不能包含块级元素。追问

大神级回复！！！

Html我在电脑上写的html里边的长度用px，在浏览器上边挺合适，为什么当我用手机看这个html网页时就乱了？

再问个问题哈，大神！分数加倍相送～

是不是把尺寸都换成百分比？

追答

手机上排版跟电脑端有所不同的，要想让网页在手机上电脑上都能看要把网站排成自适应的。
要在头部加下面代码：

然后html里面长度都用百分比来写。
然后设计稿也要考虑自适应，不能和常规电脑网站一样，具体的问题碰到了在百度吧。

也不一定，大部分要用百分比。有的地方要看情况，比如新闻列表，左边图片右边内容，左边图片宽高可以按需求写成死的，右边内容部分可以写成自适应。自适应排版的时候有时图片要特别处理，具体情况具体对待吧

参考技术A 嗯，实在要这样做的话，内联元素的css里面写入样式：display:block;

块级元素和内联元素的宽高是如何确定的

　　在刚接触CSS的时候，每次给元素添加样式，都习惯性的写上宽是多少，高是多少，为自己挖坑无数，还暗自抱怨说CSS好烦，不过它真的是好烦，脾气很怪。

　　好，言归正传。在讨论元素的宽高是如何确定的之前，我们先明确一下文档流的概念：对于内联元素，是从左到右排列的，当宽度不够时换行；对于块级元素，是从上到下排列的，每一个元素都另起一行。

　　一、内联元素宽高的确定

　　宽度：不受width的限制，有文字内容决定的，padding 和 margin 可以改变宽度。

　　高度：不受height的限制，padding 和margin 也不能改变。可以通过line-height 和 font-size来改变。

　　二、块级元素宽高的确定

　　宽度：1、可以自行设置width的值；2、不设置宽度时的值为auto，默认宽度是父元素的宽度-自身的border-自身的margin。3、需要注意的是如果宽度写了100%，应该是元素内容的宽度（content）等于父元素的宽度，元素的宽度应该等于这个宽度加自身的border，会凸出来一部分。

　　高度：1、可以自行设置height的值；2、默认值为0；3、由元素内部的文档流中的元素的高度的总和决定的（里面元素的height+padding+margin有合并的可能），当元素脱离文档流时，不能用于父元素高度的计算；4、当块级元素里面是文字时，文字只有一行，高度由line-height决定，文字有多行，会自动换行，但是碰到长度很长的单词时需要手动添加连字符（-）换行，有一个属性与之相关，word-breaking: break all; 超出宽度，不管单词是否结束都换行。 

　　三、inline-block元素宽高的确定

　　宽度：1、设置width的值，超出宽度部分的处理方式和div一样，多个inline-block元素处于一行中时和inline元素的效果一样，可以用white-space控制是否换行；2、内容决定宽度。