发表新帖
发表新帖

why do modern browsers still put spaces between inline block if there is whitespace

前端 未结
关注
4 1723
慢半拍i
慢半拍i 2021-01-12 22:51

If you have markup like this:

one


two




        

                      

              相关标签:
4条回答
  • 耶瑟儿～
    2021-01-12 23:12

    Well, there are spaces between them!

    For a fix, try using font-size: 0 in the parent element.

    0 讨论(0)
  • 遇见更好的自我
    2021-01-12 23:13

    This is The solution.

       <style>
    * {
    border:0;
    margin:0;
    padding:0;
    box-shadow:0 0 1px 0px silver;
    }
    .foo {
    width: 100%;
    }
    .bar {
    width: 50%;
    float:left;
    text-align: center;
    }
    </style>
    <div class="foo">
        <div class="bar">
            ...a new customer
        <!-- the whitespace between the following divs affects rendering - why? -->
        </div> <div class="bar">
            ...an existing customer
        </div>
    </div>
    0 讨论(0)
  • 说谎
    2021-01-12 23:18

    There's a better way of removing the white space than setting font size to zero (as that method has unpleasant side effects). You can word-spacing instead:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

section {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

div {
    width: 100px; 
    height: 40px; 
    background: #e7e7e7;
    padding: 10px;
    display:inline-block;
    word-spacing:0; /* reset from parent*/
}

</style>
</head>
<body>
<section>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</section>          
</body>
</html>
    0 讨论(0)
  • 甜味超标
    2021-01-12 23:23

    This is exactly what they should do.

    Spaces between inline elements are no different from spaces between words.

    If you don't want that, use block elements, or set the font size to zero.

    0 讨论(0)
 看不清?
提交回复
热议问题