Разница между отступами представления и полем


566

В чем разница между полем представления и отступом?


10
Обивка внутри границы, поле снаружи. Подробнее см. Модель W3C Box . Это сообщение в блоге гораздо более читабельно :-)
Аарон Дигулла

2
Это может быть полезно для объявления макета
Шарик Абдулла,

3
это то же самое, что и HTML, см. здесь для получения более подробной информации stackoverflow.com/ru/questions/2189452/…
Скотт

Смотрите мой ответ на похожий вопрос stackoverflow.com/questions/21959050/…
Евгений Брусов

Ответы:


568

Чтобы помочь мне вспомнить значение подкладки , я думаю о большом пальто с большим количеством толстой хлопковой подкладки . Я в моем пальто, но я и мой мягкий плащ вместе. Мы единое целое.

Но, вспоминая край , я думаю: « Эй, дай мне немного! » Это пустое пространство между мной и тобой. Не входи в мою зону комфорта - мое поле.

Чтобы сделать это более понятным, вот изображение отступов и полей в TextView:

введите описание изображения здесь

XML-макет для изображения выше

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:text="TextView margin only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:text="TextView margin only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c5e1b0"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="TextView padding only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f6c0c0"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="TextView padding only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:padding="10dp"
        android:text="TextView padding and margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:padding="10dp"
        android:text="TextView padding and margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:text="TextView no padding no margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:text="TextView no padding no margin"
        android:textSize="20sp" />

</LinearLayout>

связанные с


578

Заполнение - это пространство внутри границы, между границей и фактическим содержимым представления. Обратите внимание, что отступы полностью охватывают контент: там есть отступы сверху, снизу, справа и слева (которые могут быть независимыми).

Поля - это пространство за границей, между границей и другими элементами рядом с этим видом. На изображении поле - это серая область вне всего объекта. Обратите внимание, что, как и отступы, поле полностью обходит содержимое: поля сверху, снизу, справа и слева.

Изображение говорит более 1000 слов (извлечено из Margin Vs Padding - CSS Properties ):

альтернативный текст


54
Ответ для HTML / CSS, вопрос был об Android. Модель представления Android основана на HTML, но не идентична. Во-первых, граница не является значительным объектом первого класса.
Сева Алексеев

48
ПРИМЕЧАНИЕ. В Android свойство layout_width включает содержимое и отступы. (В HTML свойство css width относится только к ширине контента.) Как сказал Сева, в Android нет встроенной концепции границ. Вы можете использовать 9-патчовый фон png или векторный рисунок в формате xml, чтобы добавить рамку в Android.
SharkAlley

12
Также стоит отметить, что фон изменяется на основе поля, но не отступов (в Android.)
ArtOfWarfare,

В Android то, что здесь называется «граница», на самом деле является «контейнером представления». Это должно прояснить некоторые вещи, которые я надеюсь.
Голодный Андройдер

75

Обивка внутри просмотра.

Маржа за пределами просмотра.

Это различие может иметь отношение к свойствам фона или размера.


41

Заполнение внутри вида, поле снаружи. Заполнение доступно для всех видов. В зависимости от вида, может быть или не быть визуальная разница между отступом и полем.

Для кнопок, например, характерное фоновое изображение кнопки включает отступы, но не поле. Другими словами, добавление большего количества отступов делает кнопку визуально больше, в то время как добавление большего поля просто увеличивает разрыв между кнопкой и следующим элементом управления.

Для TextViews, с другой стороны, визуальный эффект заполнения и поля идентичен.

Доступно ли поле или нет, определяется контейнером представления, а не самим представлением. В LinearLayoutполях поддерживается, в AbsoluteLayout(сейчас считается устаревшим) - нет.



8

Заполнение означает пространство между виджетом и исходным фреймом виджета. Но поле - это пространство между исходным кадром виджета и границами кадра другого виджета. введите описание изображения здесь,


7

Заполнение - это пространство внутри границы между границей и фактическим изображением или содержимым ячейки. Поля - это пространство за границей, между границей и другими элементами рядом с этим объектом.


7

Иногда вы можете достичь того же результата, играя только с отступом или полем. Пример :

Скажем, View X содержит представление Y (иначе: View Y находится внутри View X).

-Просмотр Y с полем = 30 ИЛИ Просмотр X с отступом = 30 даст тот же результат: представление Y будет иметь смещение 30.


7

Padding
Padding находится внутри примера View.For если дать android:paddingLeft=20dp, то элементы внутри зрения организует с 20dpшириной от left.You можно также использовать paddingRight, paddingBottom, paddingTopкоторые должны давать отступы от справа, снизу и сверху соответственно.

Маржа
Маржа за пределами View. Например, если вы дадите android:marginLeft=20dp, то вид будет организован после 20dpслева.


3

Давайте просто предположим, что у вас есть кнопка в представлении, и размер представления составляет 200 на 200, а размер кнопки составляет 50 на 50, а заголовок кнопки - HT. Теперь разница между полем и отступом заключается в том, что вы можете установить поле для кнопки на виде, например, 20 слева, 20 сверху, а отступ будет регулировать положение текста в кнопке или в виде текста и т. Д., Например. Значение отступа равно 20 слева, поэтому оно будет регулировать положение текста.


2

Маржа относится к дополнительному пространству вне элемента. Заполнение относится к дополнительному пространству внутри элемента. Поле является дополнительным пространством вокруг элемента управления. Обивка - дополнительное пространство внутри элемента управления.

Трудно увидеть разницу с полями и отступами с белой заливкой, но с цветной заливкой вы можете видеть это прекрасно.


2

В дополнение ко всем приведенным выше правильным ответам, еще одно отличие состоит в том, что заполнение увеличивает активируемую область представления, а поля - нет . Это полезно, если у вас небольшое кликабельное изображение, но вы хотите, чтобы обработчик кликов был прощающим.

Для например, увидеть это изображение моего макета с ImageView(значок Android) , где я установил paddingBotton, что 100dp(изображение акции пусковая мипмап ic_launcher). С прикрепленным обработчиком кликов я смог щелкнуть далеко за пределами изображения и по-прежнему регистрировать клик.

введите описание изображения здесь


Практичный и полезный совет!
navylover

2

Простыми словами:

  1. Заполнение - создает пространство внутри границы представления.
  2. Маржа - создает пространство за пределами границы представления.

1

Простыми словами:
отступ изменяет размер поля (с чем-то).
поле меняет пространство между разными полями

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.