CODEWITHSUNDEEP
htmlcss
Rotem B
Rotem B

Reputation: 1377

Set child element size to a parent with padding

First, I would like to say that I read many of the similar question in this issue, but I wasn't able to find and answer that worked in my case.

I have the following html:

a{
  display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
  }
<ul>
   <li>
       <a>
          <my-directive ng-click="someFunc">My text 1</my-directive>
       </a>
   </li>
   <li>
       <a ng-click="someFunc">My text 2</a>
   </li>
</ul>

My problem is that the second li is working fine because the click is on the a element which contains padding, but its part of the element. However, the first has a child element on which the ng-click is applied, and the element doesn't have all of li height and width because of the padding.

How can I fix this? It is important to keep the padding for the a element, but I need my directive to take the whole width and height, including the padding. Iv'e tried using a negative margin for my-directive but as expected, the text is no longer where it should and the size haven't changed as well.

Any suggestions?

Upvotes: 0

Views: 299

Answers (1)

Yemachu
Yemachu

Reputation: 144

My assumption is that you did not apply the ignored padding back to the child element. This way the text gets placed where it would have been if you didn't apply the padding in the first place. You could use padding:inherit for this. Though you (unfortunatly) cannot use it for applying the negative margin (yet).

Another point is that unknown tags by default are treated as display:inline. This can cause some whitespace to appear at places you don't want it to appear, and it also doesn't take the full width.

a
{
  display:block;
  position:relative;
  padding:3px 20px;
  background-color:blue;
}

/* Classes might be a better idea. */
/* Used to avoid affecting elements outside of a tags. */
a > my-directive
{
  display:block;
  margin:-3px -20px;
  padding:3px 20px;
  
  background-color:red;
}
<a>
  <my-directive ng-click>My text 1</my-directive>
</a>

Upvotes: 1

Related Questions