Why Do You Put a Display:Block on an "A" Tag That Is Inside a List

Using display: block with anchor tag

The display block will set as default width: 100%, if you wanna change it define the width in the css code.

When you remove the display: block in your code your anchor will use its default display: inline.

If you wanna use display: block and see your element like inline you can use display: inline-block;

Do we need display:block, for a already HTML block element?

Untill you changed it anyhow , p remains block element. you dont need to specify.

Why using display:block for block level elements

Most browsers recognize h1, h2, ul correctely (they were always included in HTML) but for newer HTML5 elements like header, footer and main and canvas it's a good practice. Because older browsers didn't recognize them, but if you did declare them as block element they will display them properly.

For instance IE8 wouldn't recognize footer and would display the footer as inline element (on most sites that would cause a mess). (http://caniuse.com/#search=footer)

This code block is from normalize.css a often used CSS stylesheet to "normalize" the display of elements across browsers:

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

The comments are pointing out why they are applying display: block.

In some cases, display: block may be used to set properties previously changed in CSS. For instance if a plugin wants to make sure its headings are displayed as block, it sets h1, h2... to display: block, because maybe the site it's included in has set h1 to inline.

How to apply css to li in div class to display block?

Applying display: block; to .source doesn't work because .source is the container wrapping your list and list items. In order for it to work you need to target the list and list items inside .sources like this.

.sources > ul > li {
  display: block;
}

CSS display block not working with anchor links

Display block element works perfect, Just you need to remove padding and margin for ul element.

 /*** Default CSS Attributes ***/
 #custom-wrapper ul {
    margin: 0;
    padding: 0;
 }

 /*** Overwrite CSS Attributes ***/
 #custom-wrapper ul {
    margin: 0 !important;
    padding: 0 !important;
 }

div#custom-wrapper {    width: 200px;    height: auto;    position: fixed;    right: 15px;    top: 38px;    border-radius: 6px;    background: #fff;    border: 1px solid lightgrey;}div#custom-wrapper ul {    list-style-type: none;    margin: 0;    padding: 0;}div#custom-wrapper ul li {    width: 100%;    height: 50px;    line-height: 50px;    text-align: center;   }div#custom-wrapper ul li a {    text-decoration: none;    display: block;    color: grey;    font-family: sans-serif;    border-bottom: 1px solid lightgrey;}

<div id="custom-wrapper">    <ul>        <li><a href="#">View full profile</a></li>        <li><a href="#">Logout</a></li>    </ul></div> 

---

Related Topics