CODEWITHSUNDEEP
css
Jay
Jay

Reputation: 87

CSS Remove Parent Class On Child

Is it possible to remove the padding on the image, but keep the padding for the text from within the style.css file:

<p>
  Hello World
 <img src=""> 
</p>

I've set style as:

style.css  
p { padding: 5px 10px  }  
img { padding: 0px !important}

Upvotes: 0

Views: 149

Answers (2)

Bryce Howitson
Bryce Howitson

Reputation: 7690

You need to think about how elements interact. Padding is space INSIDE the element and margin is space OUTSIDE the element. Both "push" an element around in the layout.

Images don't have padding. (at least not like other elements, you would only see it if you wanted an offset border)

Also, the text content of an element doesn't have any properties so you can't add/remove padding from that.

Your currently have something like this:

------------<p>-------------

some text
------------<img>-----------

------------</img>----------

------------</p>------------

This means the text is sitting directly on the image and there's space between the image and the bottom of the image and the end of the paragraph.

If you want space between the image and the text you would add a margin-top to the image to push it down. If you want to remove the space between the image and the end of the paragraph you can either remove the padding-bottom from the paragraph tag OR give the image a negative margin-bottom

p {
  margin-bottom: 20px;
  background-color: aqua;
}
img {
  display:block;
}

p.one {
  padding: 5px 10px;
}

p.two {
  padding: 5px 10px 0 10px;
  // top right bottom left
}

p.two img {
  margin-top: 20px;
}
What you have
<p class="one">
some text
<img src="https://via.placeholder.com/150" />
</p>

Giving the image space
<p class="two">
some text
<img src="https://via.placeholder.com/150" />
</p>

Upvotes: 1

IvanS95
IvanS95

Reputation: 5732

I'm not exactly sure what you are trying to do; the padding will be independent for each element you specify it for; so setting padding for the paragraph will not apply it for the image, however setting it on the image will increase the height of the paragraph probably.

You also have the option to display them side by side without them being nested so the padding of the paragraph does not affect the image in any way at all.

p {
  padding: 5px 10px;
  border: 1px solid red;
}

img {
  padding: 0px;
  height: 20px;
  width: 20px;
  border: 1px solid blue;
}

.img2 {
  padding: 15px;
  height: 20px;
  width: 20px;
  border: 1px solid blue;
}

.p2 {
  padding: 0px;
  border: 1px solid red;
}

.p3 {
  padding: 15px;
  border: 1px solid red;
  display: inline-block;
}

.container {
  border: 1px solid green;
}
<!-- Paragraph with padding and image inside with padding -->
<p>
  Hello World
  <img src="">
  <img src="" class="img2">
</p>

<!-- Paragraph without padding and image inside without padding -->
<p class="p2">
  Hello World
  <img src="">
</p>

<!-- Container with paragraph with padding and image without padding as separate elements  -->
<div class="container">
  <p class="p3">Hello World</p>
  <img src="">
</div>

Upvotes: 0

Related Questions