여백 및 안쪽 여백Margin and Padding

여백 및 안쪽 여백 속성 사용자 인터페이스에서 요소를 렌더링할 때 레이아웃 동작을 제어 합니다. 이 문서에서는 두 속성을 설정 하는 방법 간의 차이점을 보여 줍니다.The Margin and Padding properties control layout behavior when an element is rendered in the user interface. This article demonstrates the difference between the two properties, and how to set them.

개요Overview

여백 및 안쪽 여백은 레이아웃 관련된 개념:Margin and padding are related layout concepts:

  • 합니다 Margin 요소와 해당 인접 한 요소 간의 거리를 나타내는 속성과 요소의 렌더링 위치 및 인접 요소의 렌더링 위치를 제어 하는 데 사용 됩니다.The Margin property represents the distance between an element and its adjacent elements, and is used to control the element's rendering position, and the rendering position of its neighbors. Margin 에 값을 지정할 수 있습니다 레이아웃 하 고 보기 클래스입니다.Margin values can be specified on layout and view classes.
  • 합니다 Padding 요소 및 해당 자식 요소 사이의 거리를 나타내는 속성과 컨트롤 자체 콘텐츠 구분 하기 위해 사용 됩니다.The Padding property represents the distance between an element and its child elements, and is used to separate the control from its own content. Padding 에 값을 지정할 수 있습니다 레이아웃 클래스입니다.Padding values can be specified on layout classes.

다음 다이어그램은 두 가지 개념을 보여 줍니다.The following diagram illustrates the two concepts:

사실은 Margin 값은 가산적입니다.Note that Margin values are additive. 따라서 20 픽셀의 여백을 지정 하는 인접 요소 두 개, 요소 간 거리 40 픽셀 됩니다.Therefore, if two adjacent elements specify a margin of 20 pixels, the distance between the elements will be 40 pixels. 여백 및 안쪽 여백도 모두 적용 되 면 여백 및 안쪽 여백 요소와 콘텐츠 사이의 간격 수에 합산 합니다.In addition, margin and padding are additive when both are applied, in that the distance between an element and any content will be the margin plus padding.

두께 지정합니다.Specifying a Thickness

Margin 하 고 Padding 속성을 사용 하면 형식의 둘 Thickness 합니다.The Margin and Padding properties are both of type Thickness. 세 가지 가능성이 만들면를 Thickness 구조:There are three possibilities when creating a Thickness structure:

  • 만들기는 Thickness 균일 한 단일 값으로 정의 된 구조체입니다.Create a Thickness structure defined by a single uniform value. 단일 값을 왼쪽, 위쪽, 오른쪽 및 아래쪽 면 요소에 적용 됩니다.The single value is applied to the left, top, right, and bottom sides of the element.
  • 만들기는 Thickness 가로 및 세로 값으로 정의 된 구조체입니다.Create a Thickness structure defined by horizontal and vertical values. 가로 값 요소의 위쪽과 아래쪽에 대칭적으로 적용 되 고 세로 값을 사용 하 여 요소의 왼쪽과 오른쪽에 대칭적으로 적용 됩니다.The horizontal value is symmetrically applied to the left and right sides of the element, with the vertical value being symmetrically applied to the top and bottom sides of the element.
  • 만들기는 Thickness 왼쪽, 위쪽, 오른쪽 및 아래쪽 면 요소에 적용 되는 4 개의 고유 값으로 정의 된 구조체입니다.Create a Thickness structure defined by four distinct values that are applied to the left, top, right, and bottom sides of the element.

다음 XAML 코드 예제에서는 모든 세 가지 가능성을 보여 줍니다.The following XAML code example shows all three possibilities:

<StackLayout Padding="0,20,0,0">
  <Label Text="Xamarin.Forms" Margin="20" />
  <Label Text="Xamarin.iOS" Margin="10, 15" />
  <Label Text="Xamarin.Android" Margin="0, 20, 15, 5" />
</StackLayout>

동등한 C# 코드는 다음 코드 예제와 같습니다.The equivalent C# code is shown in the following code example:

var stackLayout = new StackLayout {
  Padding = new Thickness(0,20,0,0),
  Children = {
    new Label { Text = "Xamarin.Forms", Margin = new Thickness (20) },
    new Label { Text = "Xamarin.iOS", Margin = new Thickness (10, 25) },
    new Label { Text = "Xamarin.Android", Margin = new Thickness (0, 20, 15, 5) }
  }
};

참고

Thickness 일반적으로 자르거나 콘텐츠 overdraws 값은 음수를 수 있습니다.Thickness values can be negative, which typically clips or overdraws the content.

요약Summary

이 문서에서는 차이점을 설명 합니다 Margin Padding 속성 및 설정 하는 방법입니다.This article demonstrated the difference between the Margin and Padding properties, and how to set them. 속성은 사용자 인터페이스에서 요소를 렌더링할 때는 레이아웃 동작을 제어 합니다.The properties control layout behavior when an element is rendered in the user interface.