1, when we want to use a percentage to carry out two boxes side-by
Code:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "Utf-8">5 <style>6 HTML,7 Body{8 margin:0;9 padding:0;Ten } One A . Container{ - width:1024px; - Height:2000px; the margin:0 Auto; - } - - . Container > Div{ + Display:Inline-block; - } + A . Left{ at width:80%; - Height:100%; - Background-color:#ff0; - } - - . Right{ in width:20%; - Height:100%; to Background-color:#00f; + } - </style> the </Head> * $ <Body>Panax Notoginseng <Divclass= "Container"> - <Divclass= "Left"></Div> the <Divclass= "Right"></Div> + </Div> A </Body> the </HTML>
When we want to get two div side by Inline-block , a 80%of a war Father box, one takes up 20%. It may look just 100%, but it will cause the box on the right to fall down because of the white space between the two boxes in the code.
2. Solutions(1) Eliminate whitespace characters
Make the code of the left and right two boxes tightly connected , just don't let them have white space characters.
(2) add attribute font-size:0 to parent box ; To eliminate whitespace characters, it is recommended to use this method
3. Letter spacing and Word spacingLetter spacing--letter-spacing
Word spacing--word-spacing
Day 125th: Mobile: White-space character problem resolution
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
