font-size: 0; Elimination blanking interval

0 blank gap problem solving set inline-block due to: the use of font-size

A blank space issues

When performing page layout page code to so-called clean scale, tend to set the indent or line breaks, but when the elements display inline-block or inline, inline elements Although there is no set margin value, these lines or change indentation. Or blank space appears.

As follows:

HTML part

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>

CSS section

   #box2{
        width:240px;  
        height:240px;
        background-color:#aaf;
        display:inline-block;

    }
    #box1{
        width:240px;
        height:60px;
        background-color: #eef;
    }
    #box3{
        width:60px;
        height:240px;
        background: #ddf;
        display:inline-block;
    }

Since publishing reasons, although there is no set margin, or between two div appeared blank space. This is because it leaves a blank character between two reasons typesetting wrap div, resulting in a gap .

 

Second, the solution blank space

1, the two div elements do not wrap, into a single line . You can solve this problem, but this is not the best way

HTML code

<body>
<div id="box1">1</div>
<div id="box2">2</div><div id="box3">3</div>
</body>

CSS code

#box2{
        width:240px;  
        height:240px;
        background-color:#aaf;
        display:inline-block;
    }
    #box1{
        width:240px;
        height:60px;
        background-color: #eef;
    }
    #box3{
        width:60px;
        height:240px;
        background: #ddf;
        display:inline-block;
    }

2, to solve this problem, the best way is to add elements of a parent element, the parent element font-size: 0. (This will lead to the disappearance of the elements in the text, but also in addition to the text element to set the size, the smallest text is 12px )

HTML part

<div style="font-size:0">
<div id="box1">1</div>
<div id="box2">2</div><div id="box3">3</div>
</div>

 


 

Third, other elements

(一)、<a> 超链接出现空白间距

<a href="#" style="background:#99f">我也是超链接</a>
<a href="#" style="background:#f99">我是一超链接</a>
<a href="#" style="background:#9f9">好巧咱们都是超链接</a>

因为在代码排版的时候,<a>换行了,所以每个超链接之间会有空白间隙。a元素默认的是行内块元素

解决方法:

1、写成一行;

<a href="#" style="background:#99f">我也是超链接</a><a href="#" style="background:#f99">我是一超链接</a><a href="#" style="background:#9f9">好巧咱们都是超链接</a>

2、在a 元素外面添加一个父元素,在父元素中设置 font-size:0;这样超链接文字大小就变成了0,还要单独设置样式  font-size: 16px;

HTML部分

<div style="font-size:0px;  ">
<a href="#" style="background:#99f">我也是超链接</a>
<a href="#" style="background:#f99">我是一超链接</a>
<a href="#" style="background:#9f9">好巧咱们都是超链接</a>
</div>

CSS部分

a{   font-size: 16px;}

 

(二)图片之间出现间隙

<img src="1.jpg" width="200px" height="200px">
<img src="2.jpg" width="200px" height="200px">

 解决方法:

1、写成一行;

<img src="1.jpg" width="200px" height="200px"><img src="2.jpg" width="200px" height="200px">

2、设置父元素  font-size:0;

<div style="font-size:0px;  ">
<img src="1.jpg" width="200px" height="200px">
<img src="2.jpg" width="200px" height="200px">
</div>

Guess you like

Origin www.cnblogs.com/nyw1983/p/11626975.html