1

For a reason I'm supposed to set the display property of a button to flex. I have a span as a child element for the button (I'm aware that it is not a standard practice to have a span inside a button but still using to overcome certain limitations). I have noticed that the span takes 0.5px top and right indention. Checked if this is because of displaying the button as flex but to my surprise the span takes the indent even if the button is displayed as a block/inline-block item. There is no regular pattern for the indentation(sometimes on - top/bottom/left/right). If start zooming in/out the indentation disappears. I have overridden all the default browser stylings for the button but the problem still exists.

Here is the HTML & CSS I'm using - 

button {
  
  border: 2px solid #000; 
  padding: 0;
  display:flex;
  margin:30px;
  box-sizing:border-box;
  height: 100px;
  width:300px;
 text-shadow:none;
  box-shadow:none;
  box-shadow:none;
  text-shadow:none;
  outline:0;
  }

button span{
  background:orange;
  width:300px;
  height:100px;
 flex:1 1 auto;
  padding:0;
  color:#000;
  margin:0;
  outline:0;
}
<button type="button"><span>button[type="button"]</span></button>

PS : Issue in Chrome & Edge (Surface Pro 4, Windows 10)

Spent more than 3 hours to find out the issue but in vain. Can anyone explain me on why this issue is caused ?

Charan
  • 31
  • 1
  • 7
  • 1
    You're supposed to make the `span` the flex container, not the `button`. https://jsfiddle.net/vfbjn0j0/1/ – Michael Benjamin Sep 07 '17 at 15:18
  • I think it's because the box-sizing. If you set to content-box the issue disappear. – Miguel Morera Sep 07 '17 at 15:22
  • I setting the button as flex 'coz I have two children inside the button and I want I them to inherit flex-child properties – Charan Sep 07 '17 at 15:51
  • Setting the box-sizing to content-box overflows the child outside the parent. I can make it overflow none but I just want to find out why that 0.5px indentation is being added – Charan Sep 07 '17 at 15:52
  • Not for me. When I set to content-box works fine but the element it's bigger than the `300px` set width. The problem is with `border-box` set, the child span has height and width fixed and can't fit in the button because of its border that are pushing the `span`. Anyway I have made a little tweak in your code and made a Codepen with the result: [https://codepen.io/anon/pen/VzJXwM](https://codepen.io/anon/pen/VzJXwM) – Miguel Morera Sep 08 '17 at 07:33
  • This is marked as duplicate but in my opinion it's not the same case than the other questions... – Miguel Morera Sep 08 '17 at 07:34
  • @MiguelMorera : Even in ur fiddle I can see a spacing on the right. – Charan Sep 08 '17 at 10:11
  • @MiguelMorera : Yeah, it's not the same case. Just wondering how do I remove the duplicate tag – Charan Sep 08 '17 at 10:12
  • I think there is something that I don't understand or I don't see. This is what I get: [https://imgur.com/a/BpR0S](https://imgur.com/a/BpR0S) What browser are you using? – Miguel Morera Sep 08 '17 at 10:16

0 Answers0