CSS Padding

CSS Padding and Margin


The padding (space) between the text and the border is determined by the
CSS padding attribute.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>CSS Padding</title>

    <style>

        p {
            border: 2px solid skyblue;
            padding: 30px;
        }

    </style>

</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

</body>
</html>



CSS Margin

The margin (space) outside the border is defined by the CSS margin
attribute.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>CSS Margin</title>

    <style>

        p {
            border: 2px solid skyblue;
            margin: 60px;
        }

    </style>

</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

</body>
</html>
—————————————————————————————————————————–
MR STAR CREATOR



Link to External CSS

Both a full URL and a path that is relative to the currently-viewed web
page can be used to refer to external style sheets.

This example links to a style sheet using the complete URL:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Expanded headings</title>

    <link rel=“stylesheet” href=“https://www.technicalmrstar.com/html/styles.css”>

</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

This illustration links to a style sheet on the current website that is
housed in the html folder:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Expanded headings</title>

    <link rel=“stylesheet” href=“/html/styles.css”>

</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

In the same folder as the current page, this example connects to a style
sheet:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Expanded headings</title>

    <link rel=“stylesheet” href=“styles.css”>

</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>
—————————————————————————————————————————–
MR STAR EDIT

 

CSS Download (download)

Rate this post

Categorized in: