处理距离其他项目相似的新项目CSS

Question

当我要处理新项目的其他项目的距离与新项目相似，但是只能由CSS处理吗？如果可能的话，我不想增加项目的可用距离，因为这违反了设计。 ..........................................

感谢您的帮助！

.list_item_grid {
  padding: 0 7px;
  margin-bottom: 63px;
  list-style: none;
}
.list_item_grid .item {
  float: left;
  width: calc(100%/4 - 2px);
  margin-right: 2px;
  margin-bottom: 7px;
}
.list_item_grid .item:last-child {
  margin-right: 0;
}
.list_item_grid .thumb_img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.list_item_grid img {
  position: absolute;
  width: auto;
  max-height: 100%;
  height: auto;
  border: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.list_item_grid a {
  text-decoration: none;
}
.list_item_grid .date {
  padding: 9px 14px 3px;
  color: #7b7b7b;
}
.list_item_grid .txt_link {
  margin-top: 0;
  padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
  text-decoration: none;
  color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
  content: "NEW"
}

<ul class="list_item_grid clearfix">
    <li class="item new">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>

    <li class="item">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
</ul>

Link code

Answer 1

我已经完成了，看看这个

在这里我添加了段落的类名，然后添加了一些CSS代码。

.list_item_grid {
  padding: 0 7px;
  margin-bottom: 63px;
  list-style: none;
}
.list_item_grid .item {
  float: left;
  width: calc(100%/4 - 2px);
  margin-right: 2px;
  margin-bottom: 7px;
}
.list_item_grid .item:last-child {
  margin-right: 0;
}
.list_item_grid .thumb_img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.list_item_grid img {
  position: absolute;
  width: auto;
  max-height: 100%;
  height: auto;
  border: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.list_item_grid a {
  text-decoration: none;
}
.list_item_grid .date {
  padding: 9px 14px 3px;
  color: #7b7b7b;
}
.list_item_grid .txt_link {
  margin-top: 0;
  padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
  text-decoration: none;
  color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
  content: "NEW"
}
 .para{
 height: 20px;
 margin: 0px;
 padding: 15px 0px;
 }

<ul class="list_item_grid clearfix">
    <li class="item new">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>

    <li class="item">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
</ul>