css - Erase vertical white space between 2 blocks -
i have 2 panel, panel1 float left fix width, , panel2 take remain width. in panel2, have multiple boxes have 2 small session, session 1 float left, , take remain width. problem have vertical white space between first box , second box shown in snippet. detect length of panel causes problem. how can fix problem erase white space between first box , second box?
.prefix-clear:after { display: table; content: ""; clear: both; } .box-1 { float: left; width: 50px; background: red; } .box-2 { margin-left: 50px; padding: 5px; background: green; } .left { float: left; width: 50px; background: red; } .box-2 { margin-left: 50px; background: yellow; } <div class="prefix-clear"> <div class="box-1"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> <div class="box-2"> <div class="box prefix-clear"> <div class="left">box</div> <div class="right">1</div> </div> <div class="box prefix-clear"> <div class="left">box</div> <div class="right">2</div> </div> <div class="box prefix-clear"> <div class="left">box</div> <div class="right">3</div> </div> </div> </div>
if looking remove white-space, try display: table-column; prefix-clear:after declaration. more , may need mock-up see trying achieve.
Comments
Post a Comment