Hello everyone, there is a block with a width of 20%, it is wrapped in a link, everything is fine, but for some reason, the link only takes 100% of the width of the document, tried and set the width, and so on - it doesn't work out, I can't understand The reason, I read how to wrap the block in a link, but as described - it does not work, can someone tell me. Here is the code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-spacing</title> <style> .div1 { display:block; width:20%; height:80px; background:red; } </style> </head> <body> <a href="#ler"><div class="div1"></div></a> </body> </html>

    5 answers 5

     .div1 { /*display:block*/ display: inline-block; width: 20%; height: 80px; background: red; } 
     <a href="#ler"> <div class="div1"></div> </a>

      On good, block element cannot be placed in lower case. Therefore, such nonsense happens.

      It is better to do so (if there is such an opportunity):

       <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-spacing</title> <style> .div1 { display:block; width:20%; height:80px; background:red; } .link { display: inline-block; width: 100%; height: 100% } </style> </head> <body> <div class="div1"><a href="#ler" class="link"></a></div> </body> </html>

      I advise you to read about the block model of the document and how to work with it correctly :)

        For example, this can be solved (swap the width a bit):

         a { width: 20%; display: block; } .div1 { display:block; height:80px; background:red; } 
         <a href="#ler"><div class="div1"></div></a>

        • in .div1 width: 100%; - it is by default equal to 100% - soledar10

        Added in css position: absolute

         <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-spacing</title> <style> .div1 { display:block; width:20%; height:80px; background:red; position: absolute; } </style> </head> <body> <a href="#ler"><div class="div1"></div></a> </body> </html>

          For reference, try display:table;