Why the margin = 0 doesn't take horizontal effect??

[imahdio]

I'm studying "Inline, block, and display" lesson from CSS essential training.

Based this code snippet I need to set margin to -2px to merge 2 nearby inline or inline-block elements to each other??

why the current box model have an initial space between the 2 inline or inline-block elements despite

1. we set margine to zero and
2. inside the browser default style sheet(user agent css), there is not such this initial margine at all

question:

as we know, the browser default styles be defined in user agent style sheet, but there is nothing in user agent style sheet for that 2px gap. from where is that 2px controlled??

[imahdio]

most reliable solution:

has been be presented in upcomming lesson -> "Padding, margin, and border"

another solution:

based the solution of my study friend from stackoverflow document Raju Ahmed, it's white space which is act like a character not gap.

and here is the solution to handle the space between inline-block elements on codepen

[M-ZohaibAli]

The margin property in CSS controls the space around an element. The value of "0" for the margin property will remove any space around the element. However, the effect of the margin property only applies to the top, right, bottom, and left sides of the element. It does not have any effect on the horizontal space around the element.

[imahdio]

The margin property in CSS controls the space around an element. The value of "0" for the margin property will remove any space around the element. However, the effect of the margin property only applies to the top, right, bottom, and left sides of the element. It does not have any effect on the horizontal space around the element.

tnx for your cooperation and leaving your reply dear @M-ZohaibAli yes, right with you and that's the case make me surprised, as I said, although:

1. the margine value is zero and It does not have any effect on the horizontal space around the element and
2. there is not defined any default margine in user ugent style sheet (as initial styles in browser)

why the 2px gap is appeared between the inline and block-inline elements. and based this reference the reply is:

it's white space among inline and inline-block elements which act like a character not gap.

[masad-khan]

The edge property in CSS controls the space around a component. The worth of "0" for the edge property will eliminate any space around the component. the edge property just applies to the top, right, base, and left sides of the component.

[M-ZohaibAli]

The 2px gap you are referring to is likely the default margin and padding that most browsers apply to certain elements. These default styles are set by the browser's rendering engine and are not defined in a user-agent stylesheet. This default margin and padding are applied to elements like the body, p, h1-h6, ul, ol, li, img, input, etc. You can remove this default gap by setting the margin and padding to 0 for these elements in your CSS stylesheet. For example: CSS p { margin: 0; padding: 0; } Or body { margin: 0; padding: 0; } It's worth mentioning that some CSS frameworks like Bootstrap have their own default styles, so if you are using one of these frameworks you may need to check the documentation to see how to remove the default gap.