Is there a way to eliminate the vertical margin between these floating divs?
.container {
display: block;
padding: 1px;
max-width: 500px;
}
.float-left {
display: block;
float: left;
margin: 20px;
}
.float-right {
display: block;
float: right;
margin: 20px;
}
.center {
display: block;
text-align: center;
margin: 20px;
}
.container * {
outline: 2px solid red;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.5);
}<div class="container">
<div class="float-left">::::::::::::::::::::::FloatLeft::::::::::::::::::::::</div>
<div class="float-right">::::::::::::::::::::::FloatRight::::::::::::::::::::::</div>
<div class="center">::::::::::::::::::::::::::::Center::::::::::::::::::::::::::::</div>
</div>Final output:
https://i.sstatic.net/GB1tN.png
Note that it is important for .float-left, .float-right, and .center to behave consistently when adjusting the width of .container, even if there is an alternative solution other than using floats.
Appreciate any help provided.