為何盒子會變扁？
<title>填充</title>
<style type="text/css">
#box1{
??? width:100px;
??? height:100px;
??? padding:10px 20px;
??? border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1愛的發(fā)卡機獨守空房吉薩的幾份</div>
</body>
如果以上代碼，盒子都是100px，正常應該是個正方形啊，為何這些代碼運行后盒子變成了一個矩形呢？
我的理解應該是盒子還是正方形，里面的文字分成更多行顯示，以保證左右各是20px
現在的結果有點不理解，求教，謝謝！
2019-07-31
我直接在矩形那里右鍵選擇審查元素，看到的結果是這樣至于你說的正方形，估計是你已經改了代碼。
2019-07-30
不對吧，我文字內容少打幾些字，比如就輸入“盒子1”，為何就是邊框正方形呢？
2019-07-30
你看到的矩形估計是邊框吧，因為：
你邊框的寬度是“左邊框1px+左內填充20px+實際內容100px+右內填充20px+右邊框1px=142px”
你邊框的高度是“上邊框1px+頂部填充10px+實際內容100px+底部填充10px+下邊框1px=122px”
所以你就看到矩形盒子。