chan_tameのブログ

プログラミングで詰まった点を記録していきます!

ある要素内の文字が切れてしまう時 box-sizing: border-box;について

ある要素の中にpタグを追加して文章を入れると、右端が切れてしまう。

 

折り返し自体は出来てるので、word-wrapを指定すれば良いという話でもない。

 

開発者ツールを見てみると、paddingを設定してもどうやら、親要素の外側まで伸びきっていて、うまくいかないみたい...

 

そんな時は、

box-sizing: border-box;

がおすすめ!!

zero-plus.io


box-sizingは要素のwidthとheightに、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。

  • border-box:widthとheightにpaddingとborderのサイズを含める

 

ということらしいです。

 

まさに今言ってた、要素の外にpaddingがいってしまうってことを解決するのにもってこいの手段ってわけなんです!!!