CODEWITHSUNDEEP
htmlcss
Microsis
Microsis

Reputation: 279

How to style an element to ignore the padding of its parent?

CSS

div {
   padding: 20px;
}

HTML

<div><button>test</button><p>this is some text</p></div>

Is there a way to have the button ignore the padding and hug the top right corner of the parent div, without affecting the 20px around the p?

I felt like maybe there's something I could do with the position attribute, but from my brief research, it doesn't seem to do what I want.

Upvotes: 1

Views: 17296

Answers (3)

Deadpool
Deadpool

Reputation: 8240

Try this: 

* {
  margin: 0px;
  padding: 0px; }
		
div {
  padding: 50px;
  background: yellow;
  position:relative; }
		
div p {
  background: green;
  position: absolute;
  top: 0px;
  left: 0px; }
<div>
    <p>This is paragraph inside a div.</p>
</div>

Upvotes: 1

Rafał K
Rafał K

Reputation: 132

button {
  position: relative;
  left: -20px;
  top: -20px;
}

JSFiddle

Upvotes: 1

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

You can EITHER use position, or negative margins:

Position:

div {
  padding: 20px;
  position: relative;
}
div button {
  position: absolute;
}

Negative margin:

div {
  padding: 20px;
}
button {
  margin: -20px 0 0 -20px;
}

Upvotes: 6

Related Questions