CODEWITHSUNDEEP
css
user3428422
user3428422

Reputation: 4560

CSS Inline margin issue

Hopefully an easy one.

I am concentrating heavily on the CSS side of things in my project, but am having an issue with block vs inline elements, and I don't really want to move on as I know it's fundamental to learning CSS. So the misunderstanding...

I have a span element which is inline. 

<span>Please Login With Your Details Below</span>

There is a margin-left of 40px on this span which shows

enter image description here

However if I shrink the viewport small enough it does this

enter image description here

Issue: So on the new line it doesn't keep the margin...

However if I change the span to display:block it does this

enter image description here

which is what I want.

However I read this on https://www.impressivewebs.com/difference-block-inline-css/ regarding inline elements

Will ignore top and bottom margin settings, but will apply left and right margins, and any padding

So it may be that I have misread it totally, but from what I understand it should have applied the left margin. Can someone explain why it didn't?

Thanks

Upvotes: 0

Views: 68

Answers (3)

Samyappa
Samyappa

Reputation: 531

You can use this property

text-align: justify;
text-align-last: justify;

Upvotes: 0

MarvHock
MarvHock

Reputation: 874

Your described behaviour is totally fine and correct. However, the information is correct that left and right margins are applied to the inline element.

The information you did not had is, that actually inline elements left margin only indent the first line.

Think of it as an element meant to be in one single line, where this line can have horizontal margin. Having the text break in multiple line is a nice feature. But from the point of view of the margin property its still one a line.

Upvotes: 1

Beofett
Beofett

Reputation: 2429

When the user agent decides that inline content cannot fit the containing block, it will split the inline content into multiple inline boxes in order to accommodate the wrapping required to properly display without overflowing the containing block (if possible).

So in your example, Please Login With Your Details Below would overflow the containing element when you shrink the viewport, and therefore gets broken into two inline boxes:

Please Login With Your Details and Below.

According to the W3C recommendation:

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

They provide this specific example that demonstrates what you are encountering:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

W3C example

  • The margin is inserted before "emphasized" and after "words".
  • The padding is inserted before, above, and below "emphasized" and after, above, and below "words". A dashed border is rendered on three sides in each case.

Upvotes: 1

Related Questions