如何将边距设置为相邻的两个元素中的一个元素？

Question

Here is my code:

 .fold1_content .logo{ border: 1px solid; display: inline-block; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ display: inline-block; margin-right: 5px; font-size: 60px; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div>

All I'm trying to do is set .title{margin-top: 30px;} . I mean I want to bring that title down a little bit. How can I do that?

Currently neither padding nor margin will not affect only on one element.

Answer 1

you have to use vertical-align property. For more infovertical-align property

 .fold1_content .logo{ border: 1px solid; display: inline-block; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ display: inline-block; margin-right: 5px; font-size: 60px; margin-top: 30px; vertical-align: top; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div>

Answer 2

You just need to use + css selector it would select just next item of your current class.

I made the changes in your code. I think it might helpful.

 .fold1_content .logo{ border: 1px solid; display: inline-block; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ display: inline-block; margin-right: 5px; font-size: 60px; } .fold1_content .logo + .title { margin-left: 50px; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div>

Answer 3

You could also try positioning your divs, if that doesn't bother:

 .fold1_content { position: relative; } .fold1_content .logo{ border: 1px solid; display: inline-block; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ position: relative; display: inline-block; margin-right: 5px; font-size: 60px; top: 30px; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div>

Answer 4

 .fold1_content { display:flex; flex-direction:row; align-items: center; justify-content: space-evenly; //only if you need both div to equally space } .fold1_content .logo{ border: 1px solid; display: inline-block; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ display: inline-block; margin-right: 5px; font-size: 60px; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div>

Try Flexbox it gives better output

Answer 5

Add float:left; or float:right; to both of your elements then your margin should work as expected. Best of luck!

<style>
.fold1_content .logo{
    border: 1px solid;
    display: inline-block;
    height: 80px;
    width: 80px;
    text-align: center;
    float:left;
}
.fold1_content .title{
    display: inline-block;
    margin-right: 5px;
    font-size: 60px;
    float:left;
    margin-top:30px;
}
</style>
<div class="fold1_content">
    <div class="logo">logo</div>
    <div class="title">
        title
    </div>
</div>

Answer 6

Here yo go with one more solution

 .fold1_content .logo{ border: 1px solid; display: inline-block; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ display: inline-block; margin-right: 5px; font-size: 60px; vertical-align: text-top; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div>

Hope this will help you.

Answer 7

 .fold1_content{ display: -webkit-flex; display: flex; width: 400px; height: 250px; } .fold1_content .logo{ border: 1px solid; height: 80px; width: 80px; text-align: center; } .fold1_content .title{ height: 80px; width: 80px; margin-right: 5px; font-size: 60px; }

 <div class="fold1_content"> <div class="logo">logo</div> <div class="title"> title </div> </div> Try flex property, it's awesome.