Allow padding of child element to go out of parent

March 30, 2023

I have the following:

#container {
  width: 200px;
}

#label {
  margin: 0;
  padding: 0;
}

#parent {
  display: flex;
  margin: 0;
  padding: 0;
}

#url {
    margin: auto 0px;
    display: inline-block;
    overflow: hidden;
    flex-grow: 1;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#clipboard {
    padding: 12px;
    flex-grow: 0;
}

<div id="container">
  <span id="label">Label</span>
  <div id="parent">
    <p id="url">Sample URL</p>
    <button id="clipboard">Clipboard Icon</button>
  </div>
</div>

I’m trying to allow the padding of the clipboard button to flow out of its parent container, so there isn’t a space between the Label and Sample URL. If I use relative positioning to push the clipboard button upwards, the icon won’t be centered with the Sample URL text.

I’m trying to get something like this (no space between the Label and Sample URL), but with the clipboard button aligned to the Sample URL

>Solution :

You don’t want the paragraph auto layout so make it a div then just give the parent a negative top margin margin-top: -0.75rem;.
This can probably be cleaned up a bit overall .

Borders added to show what is where only.

#container * {
  border: dotted red 1px;
}

#container {
  width: 200px;
}

#label {
  margin: 0;
  padding: 0;
}

#parent {
  display: flex;
  margin-top: -0.75rem;
  padding: 0;
}

#url {
  margin: auto 0px;
  display: inline-block;
  overflow: hidden;
  flex-grow: 1;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#clipboard {
  padding: 12px;
  flex-grow: 0;
}

<div id="container">
  <span id="label">Label</span>
  <div id="parent">
    <div id="url">Sample URL</div>
    <button id="clipboard">Clipboard Icon</button>
  </div>
</div>