margin and padding effects in inline elements

[imahdio]

based on the above table summary from this lesson and this example code snippet margin doesnot effect on vertical direction of inline elements. this truth explicitly denoted. but I figured out a misbehaviour in padding of inline elements too. indeed although padding visually take effect in all directions of inline elemnts , but seems not be considered as the size of inline elements IN VERTICAL DIRECTION and that's why easily be overlapped on other surrounded elements!!! while padding on block and inline-block elements never be overed lapped on any sirounded area.

What's your opinion, Do you agree with me? can you find any resources which apply this claims?

[Muneeb60coder]

Yes. Margin-top and bottom does not effect the inline element. You can see it by applying margin top and margin bottom on inline elements. Let try on span which is inline element in the following link:- https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span

[KD3010]

Yeah, it seems that padding in inline elements can truly overlap whereas it can not overlap in inline-block or block.

I found this in one question being asked on stack-overflow Padding is ignored in the case of inline elements by default. However, you can always override these with display: block; or display: inline;. Block elements (also inline blocks) have full padding support.

[imahdio]

Yes. Margin-top and bottom does not effect the inline element. You can see it by applying margin top and margin bottom on inline elements. Let try on span which is inline element in the following link:- https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span

But I asked about padding top and padding bottom which visually take effect on inline elements but practically overlapped on surrounded areas look like the padding top and bottom not be considered as size of the element

do you agree with this new claim? which resources confirm it?

[Muneeb60coder]

Yes. Margin-top and bottom does not effect the inline element. You can see it by applying margin top and margin bottom on inline elements. Let try on span which is inline element in the following link:- https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span

But I asked about padding top and padding bottom which visually take effect on inline elements but practically overlapped on surrounded areas look like the padding top and bottom not be considered as size of the element

do you agree with this new claim? which resources apply it?

Yes padding top and bottom effect the inline element. But it overlapped on surrounded areas. According to the box model defination, padding top and bottom for inline element is a part of element. https://stackoverflow.com/questions/33620139/padding-for-inline-elements

[mic-andrew]

Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.

https://stackoverflow.com/questions/42572056/why-margin-top-and-bottom-is-missing

[MohamedGamalBarghash]

Padding top and bottom in inline elements completely overlap everything else. The browser doesn't treat it as a box like display: inline block, it just knows it doesn't really need top or bottom padding, so ,you can make them, but they won't take the effect you would expect from a block, because these are properties of a block. Examples of by default inline elements are: span, a, small and label, which are all used for customizing text in a paragraph or something. You can learn more about block level elements and inline elements in the link: https://www.w3schools.com/html/html_blocks.asp

[mic-andrew]

You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements

https://www.py4u.net/discuss/975662

[MBEDOBE]

the <span>of viewport</span> in the test code outputs the above image. notice how the padding is only visible for the left and right but shows nothing on the bottom and top. but when i added a border, it is surrounding the 20px padding i added to the span element.

[vidhisharma001]

@imahdio Yah! padding-top and also padding-bottom they both effects the inline element. Yes it also overlapping each other in their boundaries places. As my opinion an element's padding is the space between its content and its border. The padding-bottom property sets the bottom padding (space) of an element. The padding-left property sets the left padding (space) of an element. For more understand this you can also check out this : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow

Hope it is helpful! Thank You! :) Regards Vidhi Sharma