What is causing the <span> element to break the text onto a new line, and how can this be fixed to keep the text inline within the paragraph?

HTML & CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Page</h1>
    </header>

    <section id="content">
        <p>This is a sample paragraph with <span>important</span> information.</p>
    </section>

    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

CSS (styles.css):

css

Copy code

body {
    font-family: Arial, sans-serif;
}

header {
    background-color: blue;
    color: white;
    text-align: center;
    padding: 20px;
}

section {
    background-color: lightgray;
    margin: 20px;
    padding: 20px;
}

footer {
    background-color: darkblue;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Here's the problem part */
span {
    font-weight: bold;
    background-color: yellow;
    padding: 10px 20px;
    margin: 20px;
    display: block;
}
2

Change display: block to display:inline-block in the css for the span element.

It’s unlikely that you want to style all spans in your site like that so use a class instead.

3

To fix this, you should update the <span> styling in your CSS. Replace display: block; with display: inline; to maintain the text flow within the paragraph

4

That will break the vertical padding and margin effect on that element. display:inline-block is the correct answer in order not to overlap the lines of tex…