CODEWITHSUNDEEP
htmlcss
user36339
user36339

Reputation: 273

Why is there a big margin on the right?

I was experimenting with block-level elements. I opened my html file and started inspecting it after pressing Ctrl+Shift+J and on the right of the , there is a big margin (although I didn't set any.) Could you clarify why is it appearing?

aside {
    padding: 0.4rem; 
    width: 30%;
    margin: 0.25rem;
}

.anchor {
    display: block;
    /*width: 30vw;*/
    border-radius: 5px;
    color: #fff;
    background-color: rgb(22, 122, 56);
    text-align: center;
    text-decoration: none;
    padding: 0.5rem;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css-part.css">
    </head>
    <body>
        <aside>
            <a href="https://en.wikipedia.org/" class="anchor">Wiki</a>
            <a href="https://en.wikipedia.org/" class="anchor">Impeach</a>
        </aside>
        <a href="w3c.org">llb</a>
    </body>
</html>

enter image description here

Upvotes: 0

Views: 778

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62771

The <button>s are inside an <aside>, which is a block-level element.

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.

Add a style to make the <aside> a display: inline-block; (or float: left;) to achieve the effect you want.

aside {
    padding: 0.4rem; 
    width: 30%;
    margin: 0.25rem;
}

.anchor {
    display: block;
    /*width: 30vw;*/
    border-radius: 5px;
    color: #fff;
    background-color: rgb(22, 122, 56);
    text-align: center;
    text-decoration: none;
    padding: 0.5rem;
}

.inline-block {
  display: inline-block;
}
<aside>
  <a href="https://en.wikipedia.org/" class="anchor">Wiki</a>
  <a href="https://en.wikipedia.org/" class="anchor">Impeach</a>
</aside>
<a href="w3c.org">llb</a>

<div></div>

<aside class="inline-block">
  <a href="https://en.wikipedia.org/" class="anchor">Wiki</a>
  <a href="https://en.wikipedia.org/" class="anchor">Impeach</a>
</aside>
<a href="w3c.org">llb</a>

Upvotes: 3

Related Questions