[html] Eliminate the gaps between web page elements caused by html code carriage return and line break

In order to eliminate some gaps in the browser's automatic rendering and fit the UI design more perfectly, we generally set the margin and padding of the outer margin and inner margin to 0px at the beginning of the CSS code, as follows.

/*通配符设置页面所有元素内外边距为0*/
* {
    
    
    margin: 0px;
    padding: 0px;
}

But sometimes there are still gaps in the rendered page, the code and renderings are as follows.

<!--父元素-->
<div class="part2 box">
    <!--相邻子元素-->
    <div class="p2-1"></div>
    <img src="imgs/p2/one.jpg" height="170px;" alt="">
</div>

.part2 .p2-1{
    
    
    width: 234px;
    height: 170px;
    background-color: rgb(95, 87, 80);  
    /*为了让div块元素和图片一行显示，设置div为行内块元素*/
    display: inline-block; 
}

The reason for the gap is that in the html code, there is a carriage return and line feed between two elements, so it is rendered as a space by the browser.

Solution: Set the font size of the parent element to 0px

.part2{
    
    
    font-size: 0px;  /*空格所占大小将变为0px*/
}

The disadvantage of this method is that if there is a font in the sub-element, it will affect the font size of the sub-element, so the font size of the sub-element must be set separately.