Question

这是我的代码：

.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>

我要做的就是设置.title{margin-top: 30px;}。我的意思是我想把这个头衔降低一点。我怎么能这样做？

目前，padding和margin都不会仅影响一个元素。

Answer 1

您必须使用 vertical-align 属性。有关详细信息vertical-align property

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

你只需要使用+ css选择器就可以选择当前类的下一个项目。

我在您的代码中进行了更改。我认为这可能会有所帮助。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

你也可以尝试定位你的div，如果这不困扰：

.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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

尝试使用Flexbox，它可以提供更好的输出

Answer 5

添加浮动：左;或漂浮：对;对于你的两个元素，那么你的保证金应该按预期工作。祝你好运！

<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

在这里，你再来一个解决方案

.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>

希望这会对你有所帮助。

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.

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

7 个答案: