When you place an image inside the link tag (between and), the visitor's browser by default draws a one-pixel-wide blue border around the image. In addition to the fact that browser arbitrariness increases the size of this design element of your page by two pixels vertically and two pixels horizontally, the blue color may not match the color scheme of the page design.
Instructions
Step 1
If you need to remove the border from one or more link images, you can do this by adding a border attribute with a zero value to the tag of each of the images you need. For example: The same effect can be achieved using the style attribute by placing the same border with a zero value in it: The zero value (0px) in this variant can be replaced with the value "none" (without quotes).
Step 2
If you need to solve this problem radically, that is, for all pictures with links in the whole document, then it is better to do it differently. There is no need to add the corresponding attribute to the tag of each picture separately, it is easier to write down the rule common to all in the style description at the beginning of the document. This CSS rule will look like this: a img {border: none;} It should be placed in the style description block, and the block itself should be placed before the tag closing the page title:
a img {border: none;}
Step 3
Not only images, but also simple text links in some types of browsers have a similar problem - if a visitor clicks on the link, then a dotted border will remain around it. To save your page from this design error, add the following link rule to the style descriptions:
a img {outline: none;}
