如何使用填充使弹性元素更大？

Question

I have this div, and I'm trying to have the padding on top and bottom be a little bit more, to distance the text from the edge. The div I'm talking about is the parent one (#skip). The CSS is as follows:

I tried using padding and margin, but both don't have the intended effect. Any suggestions?

 .break { flex-basis: 100%; width: 0; }.subtext { font-size: 30px; text-transform: capitalize; } #skip { flex-wrap: wrap; display: flex; cursor: pointer; flex-direction: row; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s; position: absolute; width: auto; top: 470px; left: 50%; transform: translateX(-50%); height: 55px; background: #FFFFFF; box-shadow: 0px 4px 4px #9f9f9f; border-radius: 100px; text-transform: uppercase; font-family: 'Lato', sans-serif; font-style: normal; font-weight: normal; font-size: 60px; line-height: 28px; color: #A8C8A3; transition-duration: 0.3s; }

 <div id="skip" style="height: 5vh;padding-top: ;" class="position-absolute">Entra <div class="break"></div> <div class="subtext">Home Page Classica</div> </div>

Answer 1

 .subtext { font-size: 30px; text-transform: capitalize; cursor: auto; } #skip { flex-wrap: wrap; display: flex; cursor: pointer; flex-direction: row; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s; position: absolute; padding: 30px; top: 470px; left: 50%; transform: translateX(-50%); height: 505px; background: #FFFFFF; box-shadow: 0px 4px 4px #9f9f9f; border-radius: 100px; text-transform: uppercase; font-family: 'Lato', sans-serif; font-style: normal; font-weight: normal; font-size: 60px; line-height: 28px; color: #A8C8A3; transition-duration: 0.3s; }

 <div id="skip" class="position-absolute">Entra <div class="subtext">Home Page Classica</div> </div>

Try This!

Update:

Don't make the width: auto; Then you can do your padding

Answer 2

1. remove the styling in your html
2. clean up your code, delete duplicates.
3. add a wrapper, so you can center the div vertically and horizontally on the page (I assumed that was your goal)
4. define a width for the #skip element
5. add padding, remove eventually line-height

 body, html { height: 100%; } #wrapper { display: flex; align-items: center; /* align vertical */ justify-content: center; /* align horizontal */ height: 100%; } #skip { flex-direction: column; padding: 60px 30px; min-width: 30%; border-radius: 100px; background: #FFFFFF; box-shadow: 0 4px 4px #9f9f9f; color: #A8C8A3; text-align: center; text-transform: uppercase; font-size: 60px; font-family: 'Lato', sans-serif; /* line-height: 28px; */ cursor: pointer; transition-duration: 0.3s; }.break { }.subtext { font-size: 30px; }

 <div id="wrapper"> <div id="skip" class="position-absolute">Entra <div class="break"></div> <div class="subtext">Home Page Classica</div> </div> </div>

Answer 3

I had removed some of the code just to clear things up a little.

The cleanest way to move the text away from the edge is actually to use padding, but as you found, it annoyingly changes the width of our parent element. We can negate that effect by adding the box-sizing: border-box property to the element we will be applying the padding to. This way, the padding actually gets put onto the inside of the element, rather than the outside.

In my code snippet below, I gave the parent #skip the display: flex property, along with the flex-direction: column , justify-content: center , and align-items: center . When centering items in a column flex, justify-content aligns them vertically, while align-items aligns them horizontally.

In order to space everything out, I went ahead and added a margin to the .subtext element as well.

The reason there were so many issues with spacing on yours, is because you were collapsing the parent by assigning the #skip element a height that would have been smaller than the resulting height from the font-size you had set.

In terms of responsiveness, it is generally best practice to let the elements base their height on the content of the element.

You should also refrain from defining line-heights in pixels, try to use em or rem 's instead. They adjust based on the font-size of the parent element.

 .subtext { font-size: 30px; text-transform: capitalize; margin-top: 32px; } #skip { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 32px; transition-duration: 0.5s; background: #FFFFFF; box-shadow: 0px 4px 4px #9f9f9f; border-radius: 100px; text-transform: uppercase; font-family: 'Lato', sans-serif; font-size: 60px; color: #A8C8A3; }

 <div id="skip"> Entra <div class="subtext">Home Page Classica</div> </div>