CODEWITHSUNDEEP
htmlcssanchordisplaydisplaytag
Priyansh Patel
Priyansh Patel

Reputation: 9

My Question is In if Display inline then we can not use margin bottom?

Here <a> tag has display: inline so margin-bottom can not apply but when I use display: block then it works.

Why can't I define a margin-bottom on an inline element?

display: inline; with margin-bottom: 1rem:

a {
  display: inline;
  margin-bottom: 1rem;
  text-decoration: none;
  color: red;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a>Nunc dolor est, placerat eget ullamcorper ut, tempor sed est. In sagittis posuere fermentum. Curabitur lorem leo, lobortis vitae varius id, finibus eu risus.</a> Donec ligula nibh, eleifend a eros sed, vestibulum viverra felis. Donec ante lacus, laoreet nec purus ac, suscipit cursus tellus. Maecenas a nibh finibus, elementum tellus sed, bibendum urna. <a>Mauris quis blandit erat, et fermentum felis. Pellentesque fringilla purus elit, consectetur malesuada lorem tempus at</a>. Sed sit amet placerat mauris. Vivamus in malesuada nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Vestibulum non urna vitae est luctus viverra fermentum a orci. Etiam vitae dignissim risus. Nunc urna quam, pellentesque et neque vel, tincidunt aliquet lacus. Donec lacus magna, aliquam at neque venenatis, placerat imperdiet magna. Sed iaculis aliquet enim eu suscipit. Aliquam maximus pretium mollis. <a>Fusce bibendum orci est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam suscipit blandit arcu a gravida. Integer pellentesque auctor commodo</a>.</p>

display: block; with margin-bottom: 1rem:

a {
  display: block;
  margin-bottom: 1rem;
  text-decoration: none;
  color: red;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a>Nunc dolor est, placerat eget ullamcorper ut, tempor sed est. In sagittis posuere fermentum. Curabitur lorem leo, lobortis vitae varius id, finibus eu risus.</a> Donec ligula nibh, eleifend a eros sed, vestibulum viverra felis. Donec ante lacus, laoreet nec purus ac, suscipit cursus tellus. Maecenas a nibh finibus, elementum tellus sed, bibendum urna. <a>Mauris quis blandit erat, et fermentum felis. Pellentesque fringilla purus elit, consectetur malesuada lorem tempus at</a>. Sed sit amet placerat mauris. Vivamus in malesuada nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Vestibulum non urna vitae est luctus viverra fermentum a orci. Etiam vitae dignissim risus. Nunc urna quam, pellentesque et neque vel, tincidunt aliquet lacus. Donec lacus magna, aliquam at neque venenatis, placerat imperdiet magna. Sed iaculis aliquet enim eu suscipit. Aliquam maximus pretium mollis. <a>Fusce bibendum orci est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam suscipit blandit arcu a gravida. Integer pellentesque auctor commodo</a>.</p>

Upvotes: 0

Views: 57

Answers (0)

Related Questions