Title: Why does adding background color also add padding?
Last modified: October 6, 2020

---

# Why does adding background color also add padding?

 *  Resolved [authentictech](https://wordpress.org/support/users/authentictech/)
 * (@authentictech)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/why-does-adding-background-color-also-add-padding/)
 * When background color is changed for a block like columns, I noticed that it 
   adds padding to the block. What is the reasoning behind this? It is not a given
   that someone requiring background color wants also to have padding.
 * E.g. when `.wp-block-columns.has-background` is applied, then the style `padding:
   20px 38px;` is applied via style.min.css
 * In my case, I have to override all the padding because I only want to add the
   background color.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [James Hunt](https://wordpress.org/support/users/bonkerz/)
 * (@bonkerz)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/why-does-adding-background-color-also-add-padding/#post-13505058)
 * The Gutenberg basic block styles are opinionated and try to help a user design
   a site with the basic set of blocks.
 * If the padding was not added when a colour to the was added to the columns the
   text would be flush to the edges of the column container and would look strange.
 * You can extend the core blocks using Block Styles. For this issue, you could 
   do something like the following:
 * Add to functions.php:
 *     ```
       register_block_style(
       	'core/columns',
       	array(
       		'name'  => 'no-padding',
       		'label' => 'No Padding',
       	)
       );
       ```
   
 * This registers the style and tells the block to apply the class “no-padding” 
   when it is selected.
 * Add to your style.css / stylesheets:
 *     ```
       .wp-block-columns.is-style-no-padding .wp-block-column 
              padding: 0;
       }
       ```
   
 * The “no-padding” class is prefixed by “is-style-” so you get “is-style-no-padding”
   as the final class that is applied. Use this in your CSS to apply it to the block(
   in this case, columns) and then subsequent changes you want to see.
 * I hope this helps you extend and use Gutenberg as you need.
    Then in the Block
   Editor choose No Padding style in the sidebar.
 *  Thread Starter [authentictech](https://wordpress.org/support/users/authentictech/)
 * (@authentictech)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/why-does-adding-background-color-also-add-padding/#post-13505522)
 * Thanks for that explanation. It makes sense. Also thanks for the alternative 
   solutions. 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Why does adding background color also add padding?’ is closed to new 
replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [custom styles](https://wordpress.org/support/topic-tag/custom-styles/)
 * [remove padding](https://wordpress.org/support/topic-tag/remove-padding/)

 * 2 replies
 * 2 participants
 * Last reply from: [authentictech](https://wordpress.org/support/users/authentictech/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/why-does-adding-background-color-also-add-padding/#post-13505522)
 * Status: resolved