displayの要素がずれる

↓下記のように等間隔でdiv要素を並べたいです。
(tableタグは極力使いたくありません。)
◻︎ ◻︎ ◻︎
◻︎ ◻︎ ◻︎

並べたいdiv要素に

width: 要素の幅数値;
display: inline-block;
_display: inline;
vertical-align: top;
position: relative;

を設定しましたが、↓下記のように縦列が微妙にずれます。

◻︎ ◻︎ ◻︎
◻︎　◻︎ ◻︎

marginやpaddingなどでちまちま調整しなければ駄目でしょうか。ずらさず、ぴったりさせるには何が必要かアドバイスお願いします。

質問者からの補足コメント

• そうです。◻︎1個でdiv1個です。
  cssは
  body {
  width: 表示幅;
  max-width: 表示幅の最大値px;
  margin: 上下のみ数値%設定有り 左右はauto;
  padding: 数値なし;
  line-height: 行間幅;
  }
  
  .div1個のclass名 {
  width: 要素の幅数値;
  display: inline-block;
  _display: inline;
  vertical-align: top;
  position: relative;
  }
  
  htmlは
  <div class="名前">
  文章
  </div>
  <div class="名前">
  文章
  </div>
  を繰り返しです。
  
  文章はspan要素で色付けなどをしています。

  No.1の回答に寄せられた補足コメントです。 補足日時：2018/08/18 22:26

• htmlは既に記載済みのもの以外だと
  html {
  margin: 0;
  padding: 0;
  }
  a {
  text-decoration: none;
  }
  のみしかファイル内に書き込んでいません。
  div内に挟むspanは<span style="color:色;"></span>をそのまま記入しています。
  お手数おかけします。

  No.3の回答に寄せられた補足コメントです。 補足日時：2018/08/19 13:58

• ご丁寧にありがとうございます。
  内容を確認して実行してみます。お手数おかけしました。

  No.2の回答に寄せられた補足コメントです。 補足日時：2018/08/19 13:59

• html {
  margin: 0;
  padding: 0;
  }
  
  body {
  width: 100%;
  max-width: 1400px;
  margin: 4% auto;
  padding: 0;
  line-height: 2em;
  }
  
  a {
  text-decoration: none;
  }
  
  .works {
  width: 300px;
  display: inline-block;
  _display: inline;
  vertical-align: top;
  position: relative;
  }

  No.4の回答に寄せられた補足コメントです。 補足日時：2018/08/19 19:49

• <div class="works">
  <span style="color: #ff0000;">
  偉人の名言<br>
  偉人の名言<br>
  ※10行ほど
  </span>
  </div>
  <div class="works">
  <span style="color: #0000ff;">
  偉人の名言<br>
  偉人の名言<br>
  ※10行ほど
  </span>
  </div>
  
  cssとhtmlは以上です。div内の文章以外はファイル記載のそのままです。
  上記を反映させた画面表示だと
  ◻︎ ◻︎ ◻︎
  ◻︎◾︎ ◻︎
  2段目から若干左寄りになってしまい、等間隔になりません。ところどころ、最上段のラインにあっているものもありますが、真ん中あたりからずれてきます。

    補足日時：2018/08/19 20:01

• 説明が下手ですみません。
  divで囲んだ要素を◻︎1個として、画面いっぱいに並べたいんです。
  自身が使っているディスプレイだと、現状◻︎が4つ並んでおり、5つ目から2行目に形成される感じで要素が敷き詰められています。
  
  ◻︎ ◻︎ ◻︎ ◻︎
  ◻︎ ◻︎ ◻︎ ◻︎ ←こんな感じです
  
  2行目以降の何個かの◻︎がフォント1文字分ほど左寄りになってしまい、1行目に対してずれるのをなんとかしたいんです。
  ウィンドウを縮小すると、◻︎が2つ並んだ状態になりずれなくもなりますが、最大状態だとずれます。
  ソースはこのままです。改変もしていません。
  
  max-widthの数値をさげて、◻︎が横3つにしか並ばない状態にするとずれないのを確認したのですが、出来れば画面いっぱいに並んだ状態にしたいです。

  No.5の回答に寄せられた補足コメントです。 補足日時：2018/08/19 22:09

No.6 ベストアンサー 回答者： t_fumiaki 回答日時： 2018/08/20 07:38

max-width調整しても上手く行くけど・・・・

下図の上が、横幅広げて4カラムになったもの。

下が、横幅狭めて3カラムになったもの。

この回答へのお礼

画像までご丁寧にありがとうございます。
原因は不明なままなのですが、キャッシュを削除したらズレがなくなりました。
前使っていたcssが反映されたままだったのかなと思っています。
説明が下手でわかりづらい内容にもかかわらず、お付き合いいただきありがとうございましたm(_ _)m
また機会がありましたらお願いします。

お礼日時：2018/08/20 11:00

No.5 回答者： t_fumiaki 回答日時： 2018/08/19 20:48

ん～・・・・。

□1個がdiv1個だと補足して貰いましたが、divは2個なんですか？
説明図だとdivが6個に見えるのですが、・・・。

divが2個だと、2カラムでdivが横に並ぶだけです。

そのソース、divを追加して何個にしても、ズレなしで綺麗に並びます。
また、内容がテキストなので、ずれる事も有りません。

図形だとdivの横幅に関係無く、大きければdivの幅は無視して横に広がります。

そのソース、本当なのですか？？？

firefox、IEとも、そのソースであれば上手く行きます。

No.4 回答者： t_fumiaki 回答日時： 2018/08/19 15:56

>>htmlは既に記載済みのもの以外だと・・・

そんな事ないでしょう
もしソーなら、divは上下に並んだ中央配置になるでしょう？

ここへ掲載するために、修飾してしまってるから、
実際に書いているCSS、htmlをコピペで掲載すべきです。

No.3 回答者： t_fumiaki 回答日時： 2018/08/19 05:24

「文章」部分のhtmlが全て書かれていないので何とも言えません。

html,cssも、それが全てでは無いのでしょう？

それが全てであれば、ズレは起きません。

No.2 回答者： fujillin 回答日時： 2018/08/18 23:46

こんばんは

HTMLがないので、推測での回答ですが、HTML内の連続するスペースや改行はひとつのスペースとしてみなされますが、その影響が出ているのではないでしょうか？

HTMLの記述を気にせずにレイアウトするなら、フレックスボックスを利用するのが簡単かもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

あるいは、直接二次元的なレイアウトにするのならグリッドレイアウトにするとか。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

No.1 回答者： t_fumiaki 回答日時： 2018/08/18 18:17

□1個で1div?

html側も書かないと、解らないけど・・。