为什么padding属性会使元素变大? [英] Why does padding property make elements larger?

问题描述

我有一个带字母的div:

I have a div with a letter :

HTML

HTML

<div>A</div>

CSS

div {
  border: 1px solid black;
  background-color: #CC0000;
  width: 150px;
  height: 150px;
  margin: 10px 5px 5px 50px;
  padding: 0px 30px 0px 10px /* I want to move my letter with it */
}

由于填充属性，字母会移动，但也会使正方形变大. 为什么填充将正方形转换为矩形?

The letter moves due to padding property, but it also makes the square larger. Why does padding transform the square into a rectangle?

JSF: http://jsfiddle.net/fnBaD/1

推荐答案

填充始终应用于元素内部.因此，

Padding is always applied 'within' the element. Hence,

padding:5px;

有效地在元素的所有四个侧面上添加了5px.

is effectively adding 5px on all four sides 'within' an element.

因此，padding属性使元素变大.

Hence, the padding property makes elements larger.

这篇关于为什么padding属性会使元素变大?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！