0

I'm trying to create a frame of the following design in CSS. Here is my code:

.frame1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 0px;
}

.frame2 {
  display: block;
  width: 312px;
  height: 100px;
  border: 1px solid black;
  margin: 0px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Frames in CSS</title>
  <link rel="stylesheet" href="frame.css">
</head>

<body>
  <div class="frame1"></div>
  <div class="frame1"></div>
  <div class="frame1"></div>
  <div class="frame2"></div>
</body>

</html>

The resulting webpage is quite close to what I require, but I cannot get rid of the spaces in between each block, even with padding. How can I overcome this problem? Any help is appreciated.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Mull Pasha
  • 1
  • `inline-block` elements stand on the `baseline`, so it shows a litlle gap underneath, you can reset `vertical-align` to top, `middle` or `bottom` to remove it. It also shows the `white-space`, like any you have inside a text in between words. Then to include borders and padding into size calculation, you have to reset `box-sizing` to `border-box`. finally, nowdays, such layout is build from `flex` or `grid` . – G-Cyrillus Sep 18 '21 at 11:13

2 Answers2

1

inline-block elements stand on the baseline, so it shows a litlle gap underneath, you can reset vertical-align to top, middle or bottom to remove it. It also shows the white-space, like any you have inside a text in between words. Then to include borders and padding into size calculation, you have to reset box-sizing to border-box. finally, nowdays, such layout is build from flex or grid .

possible fix:

* {
  box-sizing: border-box;
}

.frame1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 0px;
  vertical-align: top;
}

.frame2 {
  display: block;
  width: 300px;
  height: 100px;
  border: 1px solid black;
  margin: 0px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Frames in CSS</title>
  <link rel="stylesheet" href="frame.css">
</head>

<body>
  <!-- remove the white-space for inline-block elements so they stick to each others -->
  <div class="frame1"></div><div class="frame1"></div><div class="frame1"></div>
  <div class="frame2"></div>
</body>

</html>

Nowdays flex or grid is dedicated to this :

examples : grid

* {
  box-sizing: border-box;
}

body {
  display: grid;
  width: 300px;
  height: 200px;
  grid-template-columns: repeat(3, 1fr);
}

.frame1,
.frame2 {
  border: 1px solid black;
}

.frame2 {
  grid-column: 1 / -1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Frames in CSS</title>
  <link rel="stylesheet" href="frame.css">
</head>

<body>

  <div class="frame1"></div>
  <div class="frame1"></div>
  <div class="frame1"></div>
  <div class="frame2"></div>
</body>

</html>

flex

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-wrap:wrap;
  width: 300px;
  height: 200px;
}

.frame1,
.frame2 {
  border: 1px solid black;
  flex-grow:1;
}

.frame2 {
  flex-basis:100%
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Frames in CSS</title>
  <link rel="stylesheet" href="frame.css">
</head>

<body>

  <div class="frame1"></div>
  <div class="frame1"></div>
  <div class="frame1"></div>
  <div class="frame2"></div>
</body>

</html>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

It's probably because either you did not remove the padding and margin from the body.

Try this:

body {
    margin: 0;
    padding: 0;
}
Jelle Stekelenburg
  • 154
  • 1
  • 11
  • Thanks for your answer. However, all it does is closing out the gap between the blocks and the margin of the webpage. The underlying problem still remains :( – Mull Pasha Sep 18 '21 at 11:12