CODEWITHSUNDEEP
htmlcssmargin
Ned
Ned

Reputation: 371

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.

https://jsfiddle.net/3yaqdyz8/

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

.coin
{
    display:inline-block;
  margin-top:5px; /*Problem here*/
    background: url('http://infrox.us.lt/coin.png');
    background-size:cover;
    background-repeat:no-repeat;
}
.coin-1
{
    height:25px;
    width:25px;
}

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?

Upvotes: 0

Views: 155

Answers (1)

Paulie_D
Paulie_D

Reputation: 115061

Use vertical-align on inline-block elements.

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

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

.coin
{
  position: relative;
  top: 20px;
}

which will push the element down 20px.

JSfiddle

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.

Upvotes: 2

Related Questions