删除 Material 图标和周围 div 之间的 space

Question

我正在尝试移除 material 图标周围的圆环，我将其用作可拖动元素上的关闭图标。

这是元素的图片（我已经将背景更改为红色以突出问题），我想删除红色外圈，以便元素的漂亮边框一直延伸到边缘灰色圆圈：

这是元素和图标的 HTML 和 CSS：

HTML:

<div class="print-element">
  Tag Number
  <mat-icon class="resize-circle">highlight_off</mat-icon>
</div>

CSS:

.print-element {
    min-width: 175px;
    min-height: 45px;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    margin-right: 25px 25px 15px 0px;
    cursor: move;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 10px 50px 10px 10px;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .resize-circle{
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: white;
    border: .1px solid white;
    border-radius: 50%;
    color: #aaa;
    cursor: pointer;
  }

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

现在我可以更改垫子图标的大小，但结果如下：

使用：

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 20px;
    width: 20px;
}

产量：

这里是一个 stackblitz，所有设置都准备好了：https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss

这是我想要的样子：

即使是正确方向的指示也会有所帮助。

Answer 1

检查编辑 URL 以了解 HTML 和 CSS 中的更改 https://stackblitz.com/edit/angular-m7wwvr-xrmyje?file=src/styles.scss

Answer 2

好的，这是一个答案。我使用@Srinivas Bendkhale 的回答来达到这个结果。

我所做的是用 span 包装 icon 并修复 hight 和 width 然后我所要做的就是隐藏 overflow .

这就是它在我的浏览器中的样子。

.print-element {
  min-width: 175px;
  min-height: 45px;
  border: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-right: 25px 25px 15px 0px;
  cursor: move;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px 50px 10px 10px;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.resize-circle {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: .1px solid white;
  color: #aaa;
  cursor: pointer;
}

span {
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  top: -7px;
  border-radius: 50%;
  right: -7px;
  overflow: hidden;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="print-element">
  Tag Number
  <span><i class="material-icons resize-circle">highlight_off</i></span>
</div>

删除 Material 图标和周围 div 之间的 space

Remove space between Material icon and surrounding div

html

css

angular-material

google-material-icons

angular