Margin and padding

Use the margin() and padding() utilities to change the margin or padding of a tag element. The margin of a tag element is the space outside and around the tag element, its border, and its content. The padding of a tag element is the space between the tag element's border and its content or child elements. All arguments default to NULL, in which case they are ignored.

padding(tag, all = NULL, top = NULL, right = NULL, bottom = NULL, left = NULL)

margin(tag, all = NULL, top = NULL, right = NULL, bottom = NULL, left = NULL)

Arguments

tag	A tag element.
all, top, right, bottom, left	A responsive argument. For padding(), one of 0:5 or "auto" specifying padding for one or more sides of the tag element. 0 removes all inner space and 5 adds the most space. For margin(), one of -5:5 or "auto" specifying a margin for one or more sides of the tag element. 0 removes all outer space, 5 adds the most space, and negative values will consume space pulling the element in that direction.

See also

Other design utilities: active(), affix(), background(), border(), display(), float(), font(), height(), scroll(), shadow(), width()

Examples

### Centering an element

# In most modern browsers you want to horizontally center a tag element using
# the flex layout. Alternatively, you can horizontally center an element
# using `margin(.., right = "auto", left = "auto")`.

div(
  "Nam a sapien. Integer placerat tristique nisl.",
  style = "height: 100px; width: 200px;"
) %>%
  margin(top = 2, r = "auto", b = 2, l = "auto") %>%  # <-
  padding(3) %>%
  background("indigo")
#> <div style="height: 100px; width: 200px;" class="mt-2 mr-auto mb-2 ml-auto p-3 bg-indigo">Nam a sapien. Integer placerat tristique nisl.</div>

### Building an inline form

# Inline form elements automatically use the flex layout providing you a
# means of creating condensed sets of inputs. However, you may need to adjust
# the spacing of the form's child elements.

# Here is an inline form without any additional spacing applied.

formInput(
  id = "form1",
  inline = TRUE,
  textInput(
    id = "name",
    placeholder = "Full name"
  ),
  groupTextInput(
    id = "username",
    left = "@",
    placeholder = "Username"
  ),
  checkboxInput(
    id = "remember",
    choice = "Remember me"
  ),
  formSubmit("Login", "login")
)
#> <form class="yonder-form form-inline" id="form1">
#>   <div class="yonder-textual" id="name">
#>     <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#>   <div class="yonder-group-text input-group" id="username">
#>     <div class="input-group-prepend">
#>       <span class="input-group-text">@</span>
#>     </div>
#>     <input type="text" class="form-control" placeholder="Username" autocomplete="off"/>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#>   <div class="yonder-checkbox" id="remember">
#>     <div class="custom-control custom-checkbox">
#>       <input class="custom-control-input" type="checkbox" id="checkbox-949-70" name="checkbox-949-70" value="Remember me" autocomplete="off"/>
#>       <label class="custom-control-label" for="checkbox-949-70">Remember me</label>
#>       <div class="valid-feedback"></div>
#>       <div class="invalid-feedback"></div>
#>     </div>
#>   </div>
#>   <button class="yonder-form-submit btn btn-blue" value="login">Login</button>
#> </form>

# Without any adjustments the layout is not great. But, with some styling we
# can make this form sparkle. Notice we are also adjusting the default submit
# button added to the form input.

formInput(
  id = "form2",
  inline = TRUE,
  textInput(
    id = "name",
    placeholder = "Full name"
  ) %>%
    margin(r = c(sm = 2), b = 2),  # <-
  groupTextInput(
    id = "username",
    left = "@",
    placeholder = "Username"
  ) %>%
    margin(r = c(sm = 2), b = 2),  # <-
  checkboxInput(
    id = "remember",
    choice = "Remember me"
  ) %>%
    margin(r = c(sm = 2), b = 2),  # <-
  formSubmit(
    label = "Login",
    value = "login"
  ) %>%
    margin(b = 2)  # <-
)
#> <form class="yonder-form form-inline" id="form2">
#>   <div class="yonder-textual mr-sm-2 mb-2" id="name">
#>     <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#>   <div class="yonder-group-text input-group mr-sm-2 mb-2" id="username">
#>     <div class="input-group-prepend">
#>       <span class="input-group-text">@</span>
#>     </div>
#>     <input type="text" class="form-control" placeholder="Username" autocomplete="off"/>
#>     <div class="valid-feedback"></div>
#>     <div class="invalid-feedback"></div>
#>   </div>
#>   <div class="yonder-checkbox mr-sm-2 mb-2" id="remember">
#>     <div class="custom-control custom-checkbox">
#>       <input class="custom-control-input" type="checkbox" id="checkbox-265-150" name="checkbox-265-150" value="Remember me" autocomplete="off"/>
#>       <label class="custom-control-label" for="checkbox-265-150">Remember me</label>
#>       <div class="valid-feedback"></div>
#>       <div class="invalid-feedback"></div>
#>     </div>
#>   </div>
#>   <button class="yonder-form-submit btn btn-blue mb-2" value="login">Login</button>
#> </form>