skip to Main Content

I want the background colour of a div to extend past the minimum dimensions. Say 10px more in each direction.

Using flexBox and I have the following result: https://gyazo.com/815fcc78086c81cdc46b758c9230e9b9

My attempt is to add a border to the div, and then make that the same colour to simulate an extension. See where I have border property? That’s the attempt.

.volunteer, .organization {
    display: flex;
    color: rgb(193,193,193);
    background-color: rgba(1,48,87,.9);
    border: 15px, solid, rgba(255,48,87,.9);
    justify-content: center;
    flex-direction: column;
    margin: 5%;
}

Is there a way to do this? Only other way I see to do this is by making a background in photoshop but that seems so extra.

2

Answers


  1. What you are looking for is padding. You can simply add this line:

    padding: 10px;
    

    and adjust the number to what you want.

    Login or Signup to reply.
  2. Hi just try adding the padding

    padding 5px;
    

    or any number that you like

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search