边框右和边框左的高度与元素HTML-CSS上的填充不匹配

Question

 :root { --gray: #CBC4C4; --blue: #029DF1; --white: #FFF; --black: #000; --secondBlue: #0089D3; } * { padding: 0; margin: 0; font-family: Roboto, sans-serif; color: var(--white); } #container { margin: 100px auto; background-color: var(--blue); width: 300px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px 0px; } p, i { margin-right: 50px; } i { border-left: 1px solid var(--gray); border-right: 1px solid var(--gray); padding: 0px 20px; height: inherit; color: var(--black); } i:hover { background-color: var(--secondBlue); }

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://kit.fontawesome.com/1f5460a8a6.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Stopwatch</title> </head> <body> <div id="container"> <p id="timeArea">Blank</p> <!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> --> <i id="playButton" class="fas fa-play fa-2x"></i> <p id="reset">Reset</p> </div> <script src="script.js"></script> </body> </html>

I am wanting to matching the height of the borders to the amount of padding I have set for my i element. 我想将边框的高度与为i元素设置的填充量匹配。 Here is a jsfiddle visualizing how it looks. 这是一个可视化外观的jsfiddle 。

What I have done so far is set the height to 100%, given the container div and i element a box-sizing: border-box property, but they have not worked. 鉴于容器div和i元素具有box-sizing：border-box属性，到目前为止，我到目前为止的工作是将高度设置为100％，但它们没有起作用。 How can I proceed? 我该如何进行？

Answer 1

To be specific to your answer, 为了具体说明您的答案，

Remove padding from container 从container取出padding
Assign padding to i 将padding分配给i

 :root { --gray: #CBC4C4; --blue: #029DF1; --white: #FFF; --black: #000; --secondBlue: #0089D3; } * { padding: 0; margin: 0; font-family: Roboto, sans-serif; color: var(--white); } /*REMOVED FROM HERE*/ #container { margin: 100px auto; background-color: var(--blue); width: 300px; display: flex; flex-direction: row; justify-content: center; align-items: center; } p, i { margin-right: 50px; } /*ADDED HERE*/ i { border-left: 1px solid var(--gray); border-right: 1px solid var(--gray); padding: 20px; height: inherit; color: var(--black); } i:hover { background-color: var(--secondBlue); }

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://kit.fontawesome.com/1f5460a8a6.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Stopwatch</title> </head> <body> <div id="container"> <p id="timeArea">Blank</p> <!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> --> <i id="playButton" class="fas fa-play fa-2x"></i> <p id="reset">Reset</p> </div> </body> </html>

 :root { --gray: #CBC4C4; --blue: #029DF1; --white: #FFF; --black: #000; --secondBlue: #0089D3; } * { padding: 0; margin: 0; font-family: Roboto, sans-serif; color: var(--white); } .container { display: flex; background: royalblue; width: 300px; align-items: center; justify-content: center; margin: auto; } .box { display: flex; padding: 10px; flex: 1; justify-content: center; } .playButton { border-left: 2px solid white; border-right: 2px solid white; } .playButton:hover { background-color: rgba(0, 0, 0, 0.5); }

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://kit.fontawesome.com/1f5460a8a6.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Stopwatch</title> </head> <body> <div class="container"> <div class="box"> <p>Blank</p> </div> <div class="playButton box"> <i id="playButton" class="fas fa-play fa-2x"></i> </div> <div class="box"> <p>Reset</p> </div> </div> <script src="script.js"></script> </body> </html>

Answer 2

You have to remove the padding from the #container div and place the 10px top and bottom padding to your i element otherwise your left and right border height will always be less than the #container div . 您必须从#container div删除填充，并将10px顶部和底部填充放置到i元素上，否则您的左右边框高度将始终小于#container div 。

 :root { --gray: #CBC4C4; --blue: #029DF1; --white: #FFF; --black: #000; --secondBlue: #0089D3; } * { padding: 0; margin: 0; font-family: Roboto, sans-serif; color: var(--white); } #container { margin: 100px auto; background-color: var(--blue); width: 300px; display: flex; flex-direction: row; justify-content: center; align-items: center; } p, i { margin-right: 50px; } i { border-left: 1px solid var(--gray); border-right: 1px solid var(--gray); padding: 10px 20px; height: inherit; color: var(--black); } i:hover { background-color: var(--secondBlue); }

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://kit.fontawesome.com/1f5460a8a6.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Stopwatch</title> </head> <body> <div id="container"> <p id="timeArea">Blank</p> <!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> --> <i id="playButton" class="fas fa-play fa-2x"></i> <p id="reset">Reset</p> </div> <script src="script.js"></script> </body> </html>

边框右和边框左的高度与元素HTML-CSS上的填充不匹配

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-09-16 17:14:09

解决方案2
1 2019-09-16 17:27:47

边框右和边框左的高度与元素HTML-CSS上的填充不匹配

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-09-16 17:14:09

解决方案2 1 2019-09-16 17:27:47

解决方案1
2 已采纳 2019-09-16 17:14:09

解决方案2
1 2019-09-16 17:27:47