如何在容器上设置边距和填充？

Question

我找到了这个 StackOverflow question 我正在基于我的下一个项目。

对于每个“选项”段按钮，我想显示不同的 HTML页面。我已经改变了SegView类来实现这一目标。但是，现在 我想设置我的左右边距以提供10％的差距。在 换句话说，我的内容将集中在80％的中间位置。

是否可以简单地将容器配置为具有边距，以便我的内容卡在边框上？

以下是其他StackOverFlow question中修改过的SegView类：

Ext.define('SenchaFiddle.view.SegView', {
    extend: 'Ext.Container',
    xtype: 'seg-view',

    config: {
        layout: 'fit',
        items: [
            {
                layout: 'vbox',
                items: [
                    {
                        xtype: 'segmentedbutton',
                        allowDepress: true,
                        layout:{pack:'center'},
                        items: [
                            {
                                text: 'Option 1',
                                pressed: true,
                                handler: function () {
                                    console.log("Picked #1");
                                    Ext.getCmp('card-container').setActiveItem(0);
                                }
                            },
                            {
                                text: 'Option 2',
                                handler: function () {
                                    Ext.getCmp('card-container').setActiveItem(1);

                                }
                            },
                            {
                                text: 'Option 3',
                                handler: function () {
                                    Ext.getCmp('card-container').setActiveItem(2);
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        flex: 10,
                        id: 'card-container',
                        layout: {
                            type: 'card'
                        },
                        items: [
                            {
                                xtype: 'container',
                                style: 'background-color: #fff',

                                items: [
                                    {
                                        html: ['<h2 style="text-align: center;">Lorum ipsum</h2>',
                                        "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
                                        '<p>Hello world</p>'].join("")
                                },
                                {
                                    html: ['<h2 style="text-align: center;">Lorum ipsum</h2>',
                                        "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
                                        '<p>Hello world</p>'].join("")
                                }
                            ]
                        },
                        {
                            html: ['<p>Lorum ipsum</p>',
                                '<p>Page #2</p>'].join(""),
                            style: 'background-color: #666'

                        },
                        {
                            html: ['<p>Lorum ipsum</p>',
                                '<p>Page #3</p>'].join(""),
                            style: 'background-color: #333'

                        }
                    ]
                    }
                ]
            }

        ]
    }
});

Answer 1

只需将课程提供给容器

    items: [{
       xtype: 'container',
       cls : 'content',
       items: [{
         html: ['<h2 style="text-align: center;">Lorum ipsum</h2>',
            "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
            '<p>Hello world</p>'].join("")
         },
         {
          html: ['<h2 style="text-align: center;">Lorum ipsum</h2>',
             "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
             '<p>Hello world</p>'].join("")}
        ]}

<强> CSS

.content{
    padding-left: 10%;
    padding-right: 10%;
    background-color: #fff;
 }