如何使用 css 使边框与按钮完全一致

Question

My objective is align border perfectly to the icons (the line of the border should start with delete icon and end with archived icon without containing any up and space in between the border)

I've tried in this way:

 <div style={{ border: "1px solid black" }}>
      <DeleteIcon />
      <span>Hello</span>
      <ArchiveIcon />
    </div>

But still i could see some small space on the top of the icon and bottom too for border and icon . Can anyone help me this query?

Here is the working one: ( https://codesandbox.io/s/keen-chandrasekhar-gpjuh )

Answer 1

There are many solutions but this should get the job done for you. Use flex box and specify height. Check the solution below.

<div style={{ border: "1px solid black", height: "1rem" , display:"flex", alignItems: "center"

Answer 2

 <div style={{ border: "1px solid black", lineHeight: "24px" }}>

and

<style>
.MuiSvgIcon-root {
  vertical-align: middle;
}
</style>

should do the trick.

Currently, the icons are placed on the base line (the invisible line, where letters are aligned to). The two changes set (a) the height of the base line so that the text is centered between the icons and (b) the icons exactly in the middle of the resulting box.

Answer 3

Try this:

<div
  style={{
    border: "1px solid black",
    display: "flex",
    alignItems: "center",
    width: "fit-content"
  }}
>