How do I make this picture even across the screen in html and css?

Question

I want to make a image at the top of a html file fit across the whole screen with no gaps how can I do this?

<!DOCTYPE html>
<html>
<head>
    <title>Coding site!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
     <script src="myscripts.js"></script> 
</head>
<body>
    <img src="coding.jpg" style="width:42px;height:42px;">
</body>
</html>

score 1 · Accepted Answer · answered May 13 '21 at 03:16

The "gap" is present because in most major browsers, the default margin on the body element is 8px on all sides. To remove it, add the following CSS styling:

body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
<head>
    <title>Coding site!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
     <script src="myscripts.js"></script> 
</head>
<body>
    <img src="https://source.unsplash.com/random" style="width:42px;height:42px;">
</body>
</html>

score 1 · Answer 2 · edited May 13 '21 at 03:23

1

Make its width 100% and margin 0px.

edited May 13 '21 at 03:23

Dharman

26,923
21
73
125

answered May 13 '21 at 03:17

TechnosapienAI

11
2

score 1 · Answer 3 · answered May 13 '21 at 03:22

1

To suit the image to the frame set the width to 100%,and set the body padding: 0; and margin: 0; in the internal CSS file.

answered May 13 '21 at 03:22

Raymart

26
4

How do I make this picture even across the screen in html and css?

3 Answers3