1

li { padding-right: 1%; }

Set in % causes a line break in ul list, but when changing it into px seems to work fine.

li { padding-right: 5px; }

What is causing this error? Fiddle link

ul,
li {
  float: right;
  display: inline-block;
  margin: 0;
  padding: 0;
}

li {
  padding-right: 1%;
}
<div class="navbar">
  <a href="">CMYK</a>
  <ul>
    <li>FAQ</li>
    <li>About</li>
    <li>Contact</li>
    <li>Home</li>
  </ul>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
CoDINGinDARK
  • 244
  • 4
  • 16
  • 1
    Percentage values are relative to the parent's dimension `right,left concerns the width` – Rainbow Jun 29 '19 at 00:14
  • I know so I reduced the size to 0.5% but does not seem to work. – CoDINGinDARK Jun 29 '19 at 00:15
  • 1
    Obviously 1% of the parent's width doesn't equal 5px – Rainbow Jun 29 '19 at 00:16
  • How much % value should I use to fit properly? 80px seem to work – CoDINGinDARK Jun 29 '19 at 00:21
  • 1
    I'm not sure, use the devtools find out the with of the parent and calculate how much is 80px – Rainbow Jun 29 '19 at 00:30
  • 1
    the duplicate is not the same situation but explain the same issue of padding with percentage since float and flex item are shrink-to-fit element – Temani Afif Jun 29 '19 at 00:33
  • 2
    @ZohirSalak any percentage value even 0.0001% will cause a line break because it's percentage and it will get calculated after finding the width of the parent (which is a float element). with pixel we won't have any issue because the pixel will get added to the width of the parent. – Temani Afif Jun 29 '19 at 00:35
  • @ZohirSalak since it is a floated element, width does not exist? So it breaks? Am I correct ? – CoDINGinDARK Jun 29 '19 at 00:37
  • 1
    @CoDINGinDARK since it's float element its width depend on the content AND the content is using percentage value so we first find the width using content then the calculated width will be used to find the padding and that padding will be reduced from the width creating the break – Temani Afif Jun 29 '19 at 00:38
  • oh wow i never ran into that problem before with percentages, i've always used absolute values for padding and figured it'll be the same, well that you know learn something new everyday, However i meddled with this for a bit, and setting `box-sizing: border-box;` solves it because the padding get swallowed. – Rainbow Jun 29 '19 at 20:26

1 Answers1

1

% always work relative to something. In your case, if you try giving width to your ul, you can understand it more clearly. Let's say your ul width is 100px, so the combined with of li should be 100px, which means if any li goes above 25px in width, it will break to the next line. See the code below

ul {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

li {
  padding-right: 10%;
  list-style: none;
  display: inline-block;
}
<div class="navbar">
  <a href="">CMYK</a>
  <ul>
    <li>FAQ</li>
    <li>About</li>
    <li>Contact</li>
    <li>Home</li>
  </ul>
</div>
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48