删除margin-html

时间:2017-08-21 05:15:56

标签: html css

我正在尝试删除额外的边距 - 橙色空间,并向上移动红点。有人可以帮忙吗?我尝试过使用css标签 - margin,padding。但是,无法让它发挥作用。



<div style="padding:0px; margin-right:0px; width: 280; font-family:Arial, Helvetica, sans-serif ;font-size: 40px; font-weight: bold;color:#33A8FF">
Current Status 
</div>

<div id= "redC" style="width: 10px;
      height: 10px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background: red;
      margin-left: 400px
      ">

</div>
&#13;
&#13;
&#13;

enter image description here

4 个答案:

答案 0 :(得分:1)

使用display:inline-blockvertical-align:middle;进行div,这将使div成为一条直线并垂直居中并尽量避免inline css

div {
  display: inline-block;
  vertical-align:middle;
}

.CurrentStatus {
  padding: 0px;
  margin-right: 0px;
  width: 280;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #33A8FF
}

#redC {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: red;
  margin-left: 40px
}
<div class="CurrentStatus">
  Current Status
</div>

<div id="redC">

</div>

答案 1 :(得分:0)

方法1)display: inline-block插入div,如下所示:

div {
   display: inline-block;
}

方法2)使用:after

div {
    position: relative;
    padding:0px;
    margin-right:0px;
    width: 280px;
    font-family:Arial, Helvetica, sans-serif ;
    font-size: 40px;
    font-weight: bold;
    color:#33A8FF;
}

div:after {
    content: '';
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: red;
    border-radius: 100%;
    top: 50%;
    right: -10px;
}
<div>Current Status</div>

答案 2 :(得分:0)

这将有效

<div style="padding:0px; margin-right:0px; width: 280; font-family:Arial, Helvetica, sans-serif ;font-size: 40px; font-weight: bold;color:#33A8FF; float:left">
Current Status 
</div>

<div id= "redC" style="width: 10px;
      height: 10px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background: red;
      float:left;
      margin-top:20px;
     
      ">

</div>

答案 3 :(得分:0)

您可以将display:inline-block用于这两个div。

div {display:inline-block}