CSS Padding

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

 

 

css 충전재( 그냥 패딩..? )

 

css padding 속성은 요소 내용물 ( 경계선 안쪽에 정의된 ) 주변에 공간을 만들기 위해 사용되어진다.

 

너는 패딩의 완벽한 제어권을 가질수 있다. 요소의 위, 오른쪽, 아래, 그리고 왼쪽의 각 면에 패딩을 설정하는 속성이 있다. 

 

 

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

 

패딩의 각면들

 

css 는 요소의 각 면의 패딩을 명시하는 속성을 가지고 있다.

 

모든 패딩 속성은 아래의 값을 가진다.

 

 

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

 

패딩 - 짧은 속성

코드를 짧게 하기 위해서, 아나의 속성 안에 모든 패딩의 속성을 명시하는 것이 가능하다.

padding 속성은 다음 각 패딩의 속성을 짧게한 속성이다.

 

여기 이것의 작성방법이다.

 

만일 padding 속성이 4가지 값을 가진다면,

차례대로 top 25px, right 50px, bottom 75px, left 100px이다.

 

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

 

패딩 그리고 요소의 넓이

 

css의 width 속성은 요소의 내용물 영역의 넓이를 명시한다. 요소의 영역은 내부의 패딩, 테두리 그리고 요소의 마진의 부분이다 (portion : 부분?)

그래서 요소가 명시된 넓이를 가졌다면, 해당 요소의 추가되어진 패딩은 요소 전체의 넓이에 추가되어질 것이다?

 

이것은 자주 원하지 않은 결과이다.

 

 

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.

 

넓이를 300px로 유지하기 위해선, 패딩의 양의 상관없이, 너는 box-sizing 속성을 사용할 수 있다.

이것은 요소를 이것의 넓이로 유지하기위해 사용되어진다. 만일 너가 패딩을 증가시킨다면, 이용가능한 내용물의 공간은 줄어들 것이다.