In this lesson we’ll talk about html block layout. There two main approaches in html layouts – block html layout and table html layout. Table html layout hasn’t already used. it is not comfortable.
Html block layout is very comfortable, flexible and understandable. The key element is div tag. This tag has got two key characteristics – width and height. Also we’ll consider indents. In CSS it is margin (external indents) and padding (internal indents). Padding and margin can use with block and inline elements.

Code lesson (HTML)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="firstClass">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat reiciendis at amet debitis delectus. Quia ullam corporis, ea eos, quos molestias dicta delectus quibusdam dolor placeat illum debitis commodi esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tempore consequatur harum optio laboriosam vero veniam praesentium quis voluptates, excepturi, esse atque eius, fugit iste at nulla quasi alias consequuntur.</p>
    </div>

    <a href="#">ссылка</a>

</body>
</html>

Code lesson (CSS)

firstClass {
    width: 300px;
    height: 300px;
    background-color: #e1e1e1;
    /*margin: 10px 20px 30px 40px;*/
    /*margin: 0 auto;*/
    padding: 10px 15px;
}

a {
    display: block;
    background-color: red;
    padding: 10px 20px;
    width: 250px;
    margin: 0 auto;
}

HTML block layout

Code lesson (HTML)

Code lesson (CSS)

0 Comments

Submit a Comment Cancel reply

Pin It on Pinterest