HTML – 如何防止进入空白空间?

HTML – 如何防止进入空白空间?,第1张

概述自从我第一次学习 HTML以来,这一直困扰着我. <style>.test{ display:inline-block; background-color:#aaa; padding:5px 10px; margin:0; border:0; }</style><div class="test">Hello</div><div class= @H_502_0@ @H_502_0@ 自从我第一次学习 HTML以来,这一直困扰着我.

<style>.test{    display:inline-block;    background-color:#aaa;    @R_419_5095@:5px 10px;    margin:0;    border:0;    }</style><div >Hello</div><div >Woooorld</div><div >HTML</div><div >CSS</div>

我肯定希望将元素保持在不同的行中,因为它变得不可读.但HTML将输入转换为空间,从而破坏了布局.浮动会导致一系列新问题,或者根本无法解决我想做的事情.

除了第一个元素之外,除了实现一些Hacky负边距之外,真的没有更好的解决方案吗?

解决方法 解决这个问题的方法不同.

链接:http://css-tricks.com/fighting-the-space-between-inline-block-elements/

第一道:

<div >Hello</div><div>Woooorld</div><div>HTML</div><div>CSS</div>

要么

<div >Hello</div><div >Woooorld</div><div >HTML</div><div >CSS</div>

第二种方式:

<div >Hello</div><!----><div >Woooorld</div><!----><div >HTML</div><div >CSS</div>

第三种方式:
    使用负边距.

display: inline-block;  margin-right: -4px;

第四种方式
    跳过结束标记

<div >Hello<div >Woooorld<div >HTML<div >CSS</div>

第五种方式
    对于包装器div,将字体大小设置为零.

第六种方式也许它们根本不需要内联块,也许它们可以以这种或那种方式浮动.

@H_502_0@ 总结

以上是内存溢出为你收集整理的HTML – 如何防止进入空白空间?全部内容,希望文章能够帮你解决HTML – 如何防止进入空白空间?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/1065115.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-26
下一篇2022-05-26

发表评论

登录后才能评论

评论列表(0条)

    保存