Question 43319 in Html Question posted in
Some basic documentation can be found here.

Allow padding of child element to go out of parent – Html

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

enter image description here

Tags:

2

Answers


  1. 0

    I think your best bet will be something like what I have below. Most importantly, you shouldn’t try to put your button and <p> in the same parent div, if you don’t really want them aligned with one another. Code below uses margin: auto for the top and bottom margin of the button, vertically centering it in the #container. The height of the container is governed only by the sizes of the two pieces of text, so it will grow and shrink if you change font sizes or paddings or whatever.

    #container{
  display: flex;
  width: 300px;
}

#parent{
  flex: 1;
}

#clipboard{
  box-sizing: border-box;
  height: 20px;
  margin: auto 0px;
}

p{
  margin: 0px;
}
    <div id="container">
  
  <div id="parent">
    <span id="label">Label</span>
    <p id="url">Sample URL</p>
  </div>
  <button id="clipboard">Clipboard Icon</button>
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search