---
schema_version: "1"
id: 61f203c939b435997481e08c714c5d848e22cb9a50e544fb3ddabf9ae3d1cdf8
title: Tips for CSS in Components
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-css-tips.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-css-tips.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 8d67080a671ed8b00cf8927f8a0664c0f9d86a149f3c21bd7dd3fce693232f5c
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Tips for CSS in Components

Here are some tips for configuring the CSS for components that you plan to use in Lightning pages, the Lightning App Builder, or the Experience Builder.

**Components must be set to 100% width**

Because they can be moved to different locations on a Lightning page, components must not have a specific width nor a left or right margin. Components should take up 100% of whatever container they display in. Adding a left or right margin changes the width of a component and can break the layout of the page.

**Don’t remove HTML elements from the flow of the document**

Some CSS rules remove the HTML element from the flow of the document. For example:

```nolang
float: left;
float: right;
position: absolute;
position: fixed;
```

Because they can be moved to different locations on the page as well as used on different pages entirely, components must rely on the normal document flow. Using floats and absolute or fixed positions breaks the layout of the page the component is on. Even if they don’t break the layout of the page *you’re* looking at, they will break the layout of *some* page the component can be put on.

**Child elements shouldn’t be styled to be larger than the root element**

The Lightning page maintains consistent spacing between components, and can’t do that if child elements are larger than the root element.

For example, avoid these patterns:

```nolang
<div style="height: 100px">
  <div style="height: 200px">
    <!--Other markup here-->
  </div>
</div>

```

```nolang
<!--Margin increases the element’s effective size-->
<div style="height: 100px">
  <div style="height: 100px margin: 10px">
    <!--Other markup here-->
  </div>
</div>
```

Because components can be moved to different locations on the page, they must not have custom top or bottom padding or margin. The page maintains consistency between components; adding additional padding or margin to a component results in excessive spacing.