padding和width&height設(shè)置文本后元素實(shí)際寬高的區(qū)別
我們分別設(shè)置 padding 和 width&height為40px
.box1{
background:red;
padding: 40px;
display:inline;
}
.box2{
background:blue;
width:40px;
height:40px;
}
結(jié)果如下
c2ugt8xsmPYKFe4
分別看一下他們的結(jié)構(gòu)
1. 使用padding設(shè)置元素的寬高
padding: 40px;
X32xQwBsGrZTtCU
真正的元素寬高 = 文本的寬高 + padding的寬高
2. 使用width,height設(shè)置元素的寬高
width:40px;
height:40px;
PINdphMk4ZfncQE
這里
真實(shí)的元素寬高 = 自己定義的元素寬高
什么時(shí)候使用padding什么時(shí)候使用width&height呢每聪？
在設(shè)置一個(gè)標(biāo)準(zhǔn)的圓形時(shí)候吵聪，不適合使用padding夫嗓。因?yàn)樵O(shè)置圓形的方法如下
border-radius: 50%;
由于使用padding得到的元素真實(shí)寬高隨著文本的長(zhǎng)度會(huì)不一樣删窒。所以設(shè)置半徑為50%的時(shí)候會(huì)產(chǎn)生扭曲宏多。如圖所示，而設(shè)置了寬高的則不會(huì)有這種現(xiàn)象
mJLvfCN2xZbXShR
使用padding的好處是什么呢？
使用padding的話俊卤。文本會(huì)自動(dòng)劇中。所以不需要對(duì)文本進(jìn)行設(shè)置左敌。而使用width和height瘾蛋，文本默認(rèn)在左上角俐镐。需要自己繼續(xù)設(shè)置樣式
c2ugt8xsmPYKFe4
如何使用width&height的時(shí)候也可以讓文本居中呢矫限？
使用flex布局就可以讓文本進(jìn)行居中了
.box2{
background:blue;
width:40px;
height:40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
如圖所示
rEuIAi19Xfx2KC6
完整代碼codepen
