CSS: Permit child margin to overlap parent padding, but force child siblings to respect child margin

Question

I have a parent div with some hefty padding. My first child element is an image, which requires a minimum margin for licensing purposes. If I add margin all around the image, it pushes away the padding of the parent (moving the image to the right and growing the parent vertically to accommodate), which isn't right

The padding of the parent is more than the necessary margin for the image, so it sounds like a simple fix - make the image height the same as a row of text (to get it as large as possible without expanding the parent) and just apply margin to the right side.

However, sometimes the text wraps around to a new line, and then there's no bottom margin to protect the image from encroachment by the text. The second example below has no bottom margin. The third example has bottom margin - it moves the text down 3/4 the margin (6px) and moves the image up 1/4 of the margin (2px). I'm not sure why the image is 2 pixels low in the first 2, but I can't make it any larger without growing the parent.

How can I add margin to the image, and tell it that the child margin and parent padding can overlap, but the child margin can't overlap with its siblings?

The parent is defined by Bootstrap, so I don't want to alter the parent class much.
Besides, most items won't have images, and so it makes more sense to just use CSS to tweak the image parent (if needed).
- I could also use jQuery, but would perfer a CSS only solution. (Part of the point of the question is for me to learn CSS better.)
The question is independent of Bootstrap though - I could have produced a vanilla example, but I was already familiar with the dimensions/elements I was working with and it was faster to produce an example with Bootstraps.

.accordion {
  width: 300px;
}

.accordion-button {
  font-weight: 500;
}

a.accordion-button {
  text-decoration: initial;
  display: block;
}

.my-img {
  height: 1.5em;
}

#margin1,
#margin2,
#margin3{
  position: fixed;
  left: 13px;
  z-index: 10;
}

#margin1 {
  top: 11px;
}

#margin2 {
  top: 70px;
}

#margin3 {
  top: 151px;
}

#button-padding1,
#button-padding2,
#button-padding3 {
  position: fixed;
  left: 1px;
  z-index: 15;
}

#button-padding1 {
  top: 1px;
}

#button-padding2 {
  top: 60px;
}

#button-padding3 {
  top: 143px;
}






  
    
      
          
        Some short text
      
    
  
  
    
      
          
        Some longer text that wraps AROUND
      
    
  
  
    
      
          
        Some longer text that wraps AROUND

CSS: Permit child margin to overlap parent padding, but force child siblings to respect child margin

0 Answers