Nedas Nedas - 2 months ago 8
CSS Question

Margin collapse adjacent elements

I did some research on margin collapse and how it works, but most of the examples use parent-child situation.
An element (div), that I want to margin, does not have a parent.

Username goes here<br>
Balance: 0.00 <div class="coin coin-1"></div>

margin-top:5px; /*Problem here*/
background: url('');

I need to make the image div (.coin) a little lower than the rest of the text. Instead, it moves the div together with text next to it. How do I move only the image div?


Use vertical-align on inline-block elements.

.center {
  text-align: center;
.coin {
  display: inline-block;
  margin-top: 5px;
  /*Problem here*/
  background: url('');
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: bottom;
.coin-1 {
  height: 25px;
  width: 25px;
<div class="center">
  Username goes here
  <br>Balance: 0.00
  <div class="coin coin-1"></div>

If that's not sufficient, you can adjust the elements position using relative positioning such as ...

  position: relative;
  top: 20px;

which will push the element down 20px.


BTW: <center> has been deprecated and is an obsolete element.

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.