Css is used to surround the picture. How did this white area come from?

clipboard.png
html6imgcss

html6img

:
clipboard.png

Css
Mar.16,2021

whitespace is caused by blank lines between img tags. The solution is to set the font-size of the parent element of the img tag to 0 or write the img tag more compactly as
as

.

here is the implementation 

        body {
            margin: 0;
            padding: 0;
            font-size: 0;
        }
        img {
            padding: 0;
            margin: 0;
            display: inline-block;
            width: 33.3vw;
            height: 33.3vw;
            background-color: green;
        }
        img:first-child {
            float: left;
            width: 66.6vw;
            height: 66.6vw;
        }

the baseline of the elements in the line is in trouble. Img is an inline element, and the default display: inline; is similar to the default behavior of the text, with the bottom edge aligned to the baseline rather than the bottom edge of the container. Set fontsize to 0.
Portal CSS deeply understands the relationship between vertical-align and line-height

it is suggested that the font-size of the parent element of the img tag be set to 0,

you can use the Grid layout of CSS

commonly known as" ghost blank node ". For details, please refer to Zhang Xinxu's blog and add font-size:0 to the parent tag of the img tag.

img tag inline elements. By default, inline elements. In order to make the elements on a line have a uniform reference alignment object, there is a setting of baseline alignment by default. Because there is a baseline, there is only one more gap. Vertical-align: baseline (default) / top/bottom;

can be solved by changing the alignment object within the line.

Previous: The problem of taking stairs in algorithm

Next: Process finished with exit code-1073741819 (0xC0000005)

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu