0

I have a container with an h2 and h4 element in it centered on an img. I've set the padding to 0 and there's still too much padding. I am very new to this so any help would be appreciated.

I have selected the div to set the padding which hasn't worked but I have also tried to select h2 and h4 by themselves and still no joy.

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.our-mission-img {
  margin: 69px;
  height: 700px;
  z-index: 0;
  position: relative;
  width: 1200px;
}

.mission-text {
  position: absolute;
  text-align: center;
  background-color: black;
  color: white;
  width: 1200px;
  padding: 0.5px;
}
<div class="main">
  <img class="our-mission-img" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="berry-blitz">
  <div class="mission-text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanllay Currted, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
  </div>
</div>
Thomas
  • 11,958
  • 1
  • 14
  • 23
sam breslin
  • 11
  • 3
  • 2
    Hello, please provide a [example], with no code it will be impossible to help you. – Amaury Hanser Jan 30 '23 at 09:12
  • you should include the html giving the issue.. and the style you used for those elements or it would be impossible to address the problem. The box model includes also margins if you want to explore the matter. And pay attention not to nest flow elements (h1,h2,h*) – Diego D Jan 30 '23 at 09:13
  • Its not a padding the causes the space, it is the default margin of headline elements. – tacoshy Jan 30 '23 at 09:30
  • plus it would be worth saying you are attempting something weird in your layout. You have a flex container to set the layout of nested elements but despite you use the image as a flex item the next element is positioned absolute. You also set the width to 1200px but with no reason – Diego D Jan 30 '23 at 09:34

2 Answers2

-1

Welcome to the community! I think the issue is with the box-sizing. Setting it to border-box for all elements would get your job done

* {
    box-sizing: border-box;
}

'*' selects every element and add the given style

Shakya Peiris
  • 504
  • 5
  • 11
-2

* selects all tags and apply to all.

*{
  box-sizing: border-box;
 }

Code for it!

*{
  box-sizing: border-box;
 }

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }

.our-mission-img {
  margin: 69px !important;
  height: 700px;
  z-index: 0;
  position: relative;
  width: 1200px;
 }

.mission-text {
  position: absolute;
  text-align: center;
  background-color: black;
  color: white;
  width: 1200px;
  padding: 0.5px !important;
 }
<div class="main">
  <img class="our-mission-img" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="berry-blitz">
  <div class ="mission-text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanllay Currted, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
  </div>
</div>
Adarsh Gupta
  • 55
  • 7
  • yes, nulling margins (and the use of box-sizing) is the solution (also the use of margins nulling should be treated carefully and minimally); but I find `padding: 0;` is not needed, actually the default paddings are really useful - and can be easily overridden when needed. – Roko C. Buljan Jan 30 '23 at 09:36
  • 1
    That's an awful reset. Headers like paragraphs and others have margins for a reason. OP has a special case where these interfere with his desired layout but that's no reason to remove them completely from *all elements on the entire page*. That's like felling a tree with a nuke. And it will create other problems down the line. – Thomas Jan 30 '23 at 09:37
  • @Thomas I like to set them all by mine so `p {padding: 10px;}` – Adarsh Gupta Jan 30 '23 at 09:40
  • @RokoC.Buljan Changed like you said! Thanks for the guidance! – Adarsh Gupta Jan 30 '23 at 09:45
  • 1
    @ApneDuniya why do you use `10px` all around? Paragraphs are block-level elements and all you should care is for vertical spacing. I.e: using relative units seems like a better solution like for example: `p { padding: 0.5rem 0; }` – Roko C. Buljan Jan 30 '23 at 09:52
  • @RokoC.Buljan Yeh I got! – Adarsh Gupta Jan 30 '23 at 09:55