-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfix-inline-bug.html
More file actions
22 lines (22 loc) · 9.25 KB
/
fix-inline-bug.html
File metadata and controls
22 lines (22 loc) · 9.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Inline Bug - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Inline element spacing bug caused by html code line wrapping"><meta name=keywords content="inline element spacing bug"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/fix-inline-bug.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/fix-inline-bug.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Inline Bug"><meta property="og:description" content="Inline element spacing bug caused by html code line wrapping"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2017-01-11T21:48:19+08:00"><meta property="article:modified_time" content="2017-01-11T21:48:19+08:00"><meta property="article:tag" content="Bug"><meta itemprop=name content="Inline Bug"><meta itemprop=description content="Inline element spacing bug caused by html code line wrapping"><meta itemprop=datePublished content="2017-01-11T21:48:19+08:00"><meta itemprop=dateModified content="2017-01-11T21:48:19+08:00"><meta itemprop=wordCount content="220"><meta itemprop=keywords content="inline element spacing bug"><meta name=twitter:card content="summary"><meta name=twitter:title content="Inline Bug"><meta name=twitter:description content="Inline element spacing bug caused by html code line wrapping"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Inline Bug</h1><div class=post-meta><span class=post-time>2017-01-11</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>220 words </span><span class=more-meta>2 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#1-inline-element>1. inline element:</a></li><li><a href=#2-inline-block-element>2. inline-block element:</a></li></ul></nav></div></div><div class=post-content><h2 id=1-inline-element>1. inline element:</h2><p>If the code of inline elements (span, strong, b, em, i, etc.) is wrapped, there will be an undesirable gap between them. By setting <code>margin:0</code> or <code>padding:0</code>, this gap still exists, indicating that this gap is not margin or padding.</p><p>In order not to eliminate this gap, do we have to write the html code of the inline element in one line? The answer is no.
During development, in order to facilitate reading and debugging, we are accustomed to writing the code like this:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span> <<span style=color:#f92672>p</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>span</span>>inline element 1</<span style=color:#f92672>span</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>span</span>>inline element 2</<span style=color:#f92672>span</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>span</span>>inline element 3</<span style=color:#f92672>span</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>span</span>>inline element 4</<span style=color:#f92672>span</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>span</span>>inline element 5</<span style=color:#f92672>span</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>p</span>>
</span></span></code></pre></div><p>Solution: Set the parent element <code>font-size:0</code>, and then set <code>font-size</code> separately for the child elements to fix the bug.</p><h2 id=2-inline-block-element>2. inline-block element:</h2><p>To display multiple juxtaposed elements in one row, in addition to setting float <code>float:left;float:right</code>, we can also set <code>display:inline-block</code> to convert an inline element or block element into an inline-block element that can set the height and width.</p><p>If there are 5 <code>inline-block</code> elements, set their width to <code>20%</code>. We expect them to be displayed on one line. However, due to the spacing caused by line wrapping of the html code, it cannot be displayed in one line.</p><p>Solution: Set <code>font-size:0</code> for the parent element, and then set <code>font-size</code> separately for the child elements.</p></div><footer class=post-footer><div class=post-tags><a href=/en/tags/bug/>bug</a></div><nav class=post-nav><a class=prev href=/build-blog-with-hugo.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Hugo</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/js-reg.html><span class="next-text nav-default">Js Reg</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>