Why isn't it aligned?

.a,
.b {
    padding: 100px;
    background: -sharpccc;
    margin: 20px;
}
.a {
    float: left;
    background: pink;
} 

<div class="a"></div>
<div class="b"></div>
Css
Jun.21,2022

you also set margin


a 20px with margin-top


.a {
    margin-top: 0;
    float: left;
    background: pink;
} 

remove margin:20px from .a, .b {
...
}


. 1, you can check the location of the upper boundary of the floating element. The upper boundary of a here should be aligned with the upper boundary of the first line box of body. It is obvious to add a span element under body. 2, where is the default line when body has only block child elements.


margin fusion, left and right margin can be fused, upper and lower margin can not be fused


margin fusion is caused by the fusion of margin-top of body and div.b, and the margin-top of body is 20pxJ div.an is a floating element, and margin will not be fused with the parent element (body), so this happens


there is a saying in the CSS world, which roughly means that if the father and son are nested, the margin-top of the child will take the place of the parent.
so it is equivalent to body setting margin-top , and then pink with body as the starting point.


remove margin:20px

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30490-2bce5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30490-2bce5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?