Html Question posted in
Some basic documentation can be found here.

Html – Why margins/paddings of display: inline is work?

I have read the [W3Schools][1] and they said

display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

But, I have try to set the margin and padding to display: inline , it’s work!!
That make me so confuse what I’m doing wrong or what condition that I didn’t know.

Can someone explain me for this happening, Thank you.

ref: https://www.w3schools.com/css/css_inline-block.asp

Tags:

3

Answers


  1. 0

    Better check with https://www.w3.org/standards/.

    W3schools.com is not recommended and outdated.

    Login or Signup to reply.
  2. 0

    Inline

    Check the code snippet. If used on the menu item, the a tag will not span to full width. So you need to exactly click on the link word to navigate. For a menu item, it is better if we click anywhere in that block. With applied css from the image, you can see though the margin left and right are given, it is applied. but the margin top and bottom are not applied.

    Note: width rule is not applied since it is inline;

    Image of Inline

    Inline Block

    As the a tag spans to full width of the space, you can click on anywhere in the line, so the link will be navigated. Also you can see the margin top and bottom are applied. You can see the brown colored border around the element, which denotes the margin

    Image of Inline Block

    When to use Inline

    This is from my experience, if you have a running text and you want to alert the style of particular word (in the example considered the word highlight) use inline, so that the css rule does not affect the original para tag.

    (for testing purpose, change the margin top and bottom of class highlight and you can see the whole para position will be moved, implies, the para tag style is also altered)

    a{
 border:1px solid black;
}

ul{
 padding:0;
 margin:0;
 width:100%;
}

ul li{
 width: 100%;
}

.d-inline{
display: inline;
width:100%;
margin-top:100px; /*not respected means not implemented*/
padding:10px;
margin-left:10px; /* respected means implemented*/
margin-right:10px; /* respected means implemented*/
margin-bottom: 10px; /*not respected means not implemented*/
}


.d-inline-block{
display: inline-block;
width:100%;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding:10px;
}

.mark{
display:inline;
background:yellow;
padding:10px;
}

.highlight{
display:inline-block;
background:yellow;
margin-left:10px;
margin-right:10px;
margin-top:20px;
margin-bottom:20px;
}
    <ul>
  <li>
  <a href="#" class="d-inline">Display Inline Element</a>
  </li>
   <li>
  <a href="#" class="d-inline-block">Display Inline Element</a>
  </li>
</ul>

<div>
  <p>lorem ipsum <span class="mark">Highlighted</span> dolor spectrum</p>
</div>

<div>
  <p>lorem ipsum <span class="highlight">Highlighted</span> dolor spectrum</p>
</div>
    Login or Signup to reply.
  3. 0

    Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display

    inline

    The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.

    inline-block

    The element generates a block box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

    Play around with them below and see that margin and padding has some effects on both cases:

    function updateAttribute(name, value) {
    for (let outer of document.getElementsByClassName("outer")) {
        outer.style[name] = `${value}px`;
    }
}

window.addEventListener("load", function() {
    for (let input of document.querySelectorAll("input[type=number]")) {
        updateAttribute(input.name, input.value);
    }
});
    .inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

div {
    border: 1px solid black;
}

div.outer {
    background-color: green;
}

div.outer > div {
    background-color: red;
}
    <div class="outer inline-block"><div>a</div><div>b</div><div>c</div></div>
<hr>
<div class="outer inline"><div>d</div><div>e</div><div>f</div></div>
<hr>
Margin<input type="number" value="13" name="margin" oninput="updateAttribute('margin', this.value)">
<hr>
Padding<input type="number" value="10" name="padding" oninput="updateAttribute('padding', this.value)">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search