CSS：溢出y和填充调整

Question

嗨我想填充一些文本溢出和填充，但底部填充不起作用像顶部，左侧和右侧边界的其余部分。

我尝试添加文本溢出，但这不起作用。 :(

我想看到的 “测试” 一词被部分隐藏，并没有触及黑色边框。

body, html { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t height:100%; 
 
\t width: 100%; 
 
} 
 
.css { 
 
\t width: 220px; 
 
\t height: 220px; 
 
\t border: solid 6px black; 
 
\t font-size: 45pt; 
 
\t padding: 10px 17px; 
 
\t font-family: arial, sans-serif; 
 
\t font-weight: 600; 
 
\t line-height: 90%; 
 
\t box-sizing: border-box; 
 
\t background-color:red; 
 
\t overflow:hidden; 
 
\t text-overflow:''; 
 
}

<div class="css">CSS IS AWESOME TEST</div>

https://codepen.io/StoptThisRetard/pen/eRrrJg

Answer 1

的问题是，overflow:hidden隐藏以外的内容框，而padding是里面的的方块。

那么你得到的结果是否正确。

为了解决您的问题，您可以添加另一个div并给出div填充和背景。请参见下面的代码片段

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.css { 
 
    width: 220px; 
 
    height: 220px; 
 
    font-size: 45pt; 
 
    padding: 10px 17px; 
 
    font-family: arial, sans-serif; 
 
    font-weight: 600; 
 
    line-height: 90%; 
 
    
 
    overflow: hidden; 
 
} 
 

 
.css_wrapper { 
 
    padding: 10px 17px; 
 
    border: solid 6px black; 
 
    background-color: red; 
 
box-sizing: border-box; 
 
    
 
}

<div class="css_wrapper"> 
 
    <div class="css">CSS IS AWESOME TEST</div> 
 
</div>