[SalesForce] How to control row height in lightning:layout

I have a lightning:layout with a lightning:layoutItem, containing a lightning:select.

I want the row in the layout to be only the height of the select box but I can't figure out how to remove the space above it.

Here is my component:

    <div class="slds-is-relative">
    <lightning:layout verticalAlign="start">
        <lightning:layoutItem padding="horizontal-small" size="1">
            <lightning:select
                aura:id="select"
                name="regionFilter"
                value="{!v.filterSelectedValueRegion}"
                onchange="{!c.applyRegionFilter}"
                class="slds-m-bottom_medium"
                >
                <option value="Default">-- Region --</option>
                <option value="All">All</option>
                <aura:iteration var="filterRegionOption" items="{!v.filterOptionsRegion}">
                    <option
                        value="{!filterRegionOption}"
                        text="{!filterRegionOption}"
                        selected="{!filterRegionOption.selected}"
                        />
                </aura:iteration>
            </lightning:select>
        </lightning:layoutItem>
    </lightning:layout>

This is how it renders:

screenshot 1

I want to reduce the vertical space between 'Home' and region selector.

This is what the inspector shows:

screenshot 2

screenshot 3

How do I get rid of that space above and below the region select box?

Best Answer

Further to comment from @sfdcfox above I tested some variations. This is the component:

<aura:component>
<aura:attribute name="Option1" type="String" default="Option 1"/>

<div class="slds-is-relative">
<lightning:layout>
    <lightning:layoutItem padding="horizontal-small">
            <lightning:button variant="brand" label="My Button 1"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
            <lightning:button variant="brand" label="My Button 2"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <lightning:select
            aura:id="select1"
            name="regionFilter1"
            label="A"
            variant="label-hidden"
        >
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </lightning:select>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <lightning:select
            aura:id="select2"
            name="regionFilter2"
            label="A"
            variant="label-inline"
        >
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </lightning:select>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <select id="sel">
            <option value="{!v.Option1}">{!v.Option1}</option>
            <option value="Option 2">Option 2</option>
        </select>
    </lightning:layoutItem>
</lightning:layout>
</div>

and this is the result:

screenshot

Interestingly, the variant="label-inline" on 'select2' seems to have no effect, but the lightning:select docs state 'Use label-inline to horizontally align the label and input field.'

Related Topic