Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css部分第二题:行内(inline)元素 设置margin-top和margin-bottom 是否起作用? #12

Open
airliuchuan opened this issue Jan 15, 2018 · 2 comments

Comments

@airliuchuan
Copy link

答案是起作用
HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。
非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。
向行内非替换元素应用外边距对行高没有影响, 所以看上去是无效的, 对左右是有效果的。
向行内替换元素应用外边距会改变行高, 所以对于img input这样的替换元素, margin-top和margin-bottom是有效的

@FashionEnglishName
Copy link

有点🐂🍺。我一直以为img,input可以设置margin是inline-block的原因。看了你的回复后把input和image的display设置成了inline,结果还是可以设置margin。学到了

@JoeDylon
Copy link

JoeDylon commented Mar 9, 2021

ps: 如果inline element是flax container里的item,它们的display会自动变成block,这个时候设置margin也是有效的。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants