여백 및 안쪽 여백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:

  • @No__t_1 속성은 요소와 인접 요소 사이의 거리를 나타내며 요소의 렌더링 위치와 해당 인접 요소의 렌더링 위치를 제어 하는 데 사용 됩니다.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.
  • @No__t_1 속성은 요소와 자식 요소 사이의 거리를 나타내며 컨트롤을 자체 콘텐츠에서 분리 하는 데 사용 됩니다.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:

@No__t_1 값은 덧셈입니다.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

@No__t_1Padding 속성은 모두 Thickness형식입니다.The Margin and Padding properties are both of type Thickness. @No__t_0 구조를 만들 때 세 가지 가능성이 있습니다.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 구조를 만듭니다.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 값은 음수일 수 있으며, 일반적으로 콘텐츠를 클리핑 또는 과도 하 게 그립니다.Thickness values can be negative, which typically clips or overdraws the content.

요약Summary

이 문서에서는 MarginPadding 속성의 차이점 및 설정 하는 방법을 보여 줍니다.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.